iOs的方向宽度和高度小于其应有的高度 [英] iOs orientation widht and height are smaller than it sould be

问题描述

我在iOs 真实设备上运行离子应用程序时遇到问题(在iPhone 4和iPad 4上进行了测试).一切在android手机，平板电脑和iOs模拟器上都可以正常使用.

I have an issue running my ionic application on iOs real devices (tested on iPhone 4 and iPad 4th generation). All is woking perfectly on android phones, tablets ans iOs emulators.

(这是我使用的方向插件:cordova-plugin-screen-orientation)

(This is the orientation plugin I am using: cordova-plugin-screen-orientation)

我的应用程序被锁定为纵向模式，并且通过单击按钮，我转到了另一个锁定横向方向的页面. (到目前为止一切都很好) 当我单击后退"按钮以返回纵向页面时，它旋转并处于纵向模式，但是窗口的宽度和高度被完全弄乱了.

My app is locked in the portrait mode and by clicking on a button I pass to another page which locks the landscape orientation. (All is going well till now) When I click the back button to return to the portrait oriented page, it rotates and is in the portrait mode, but the window width and height are completely messed up.

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

I have tried many configurations found in other topics, but none of them worked for me :

<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">

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

I also noticed that the inital width and height of the portrait page are :

[Log] Window height = 480 width = 320 

比横向页面上的:

[Log 2] Window height = 320 width = 480

最后，当我返回纵向页面时，我会看到:

Finally, when I go back to the portrait page I have this :

[Log 3] Window height = 640 width = 160

这两种方法的日志相同:

Those logs are the same for those 2 methods :

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

这里的话题是相关的，但并未被质疑:stackoverflow.com/questions/18835784/iphones-orientation-change-back-portrait-breaks-sites-zoom

This topic here is related but unaswered : stackoverflow.com/questions/18835784/iphones-orientation-change-back-to-portrait-breaks-sites-zoom

页面屏幕截图:

纵向1的页面1

第1页为纵向模式，但存在宽度问题

非常感谢您！

推荐答案

我终于设法解决了这个问题.这是我的解决方法:

I finally managed to solve the issue. Here is my fix :

在XCode中打开iOs项目.

Open the iOs project in XCode.

比在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];
    }

建立并享受！

这篇关于iOs的方向宽度和高度小于其应有的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！