iOs 方向宽度和高度小于应有的值答案

【问题标题】：iOs orientation widht and height are smaller than it sould beiOs 方向宽度和高度小于应有的值
【发布时间】：2016-04-11 18:04:49
【问题描述】：

我在 iOs 真实设备（在 iPhone 4 和 iPad 第 4 代测试）上运行我的 ionic 应用程序时遇到问题。在 android 手机、平板电脑和 iOs 模拟器上一切正常。

（这是我正在使用的方向插件：cordova-plugin-screen-orientation）

我的应用程序被锁定在纵向模式，通过单击一个按钮，我转到另一个锁定横向方向的页面。（到目前为止一切顺利）当我单击返回按钮返回纵向页面时，它会旋转并处于纵向模式，但窗口宽度和高度完全混乱。

我尝试了其他主题中的许多配置，但没有一个对我有用：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" /> <!-- Works on android -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

我还注意到纵向页面的初始宽度和高度是：

[Log] Window height = 480 width = 320

比横向页面：

[Log 2] Window height = 320 width = 480

最后，当我回到肖像页面时，我有这个：

[Log 3] Window height = 640 width = 160

这两种方法的日志是相同的：

window.innerHeight / document.documentElement.clientHeight
window.innerWidth /  document.documentElement.clientWidth

这里的这个话题是相关的，但没有回答：stackoverflow.com/questions/18835784/iphones-orientation-change-back-to-portrait-breaks-sites-zoom

页面截图：

Page 1 in portrait mode

Page 1 in portrait mode but with width problems

非常感谢，提前！

【问题讨论】：

标签： ios css webview ionic-framework viewport

【解决方案1】：

我终于设法解决了这个问题。这是我的解决方法：

在 XCode 中打开 iOs 项目。

比在MainViewController.m中编辑如下函数

    - (void)webViewDidFinishLoad:(UIWebView*)theWebView
    {
    // Black base color for background matches the native apps
    theWebView.backgroundColor = [UIColor blackColor];
    theWebView.scalesPageToFit = true;
    theWebView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;

    return [super webViewDidFinishLoad:theWebView];
    }

构建并享受！

【讨论】：