iPhone app Width becomes height after Orientation Change


#1

When iPhone orientation is turned to landscape the height of the Web App changes to the old width as you would expect but when iPhone orientation is rotated back to portrait, the height stays the size of the old width and creates a smaller app Window. I guess I can program around this but it seems like it is not by design. Does anyone have a fix for this or has similar problems? Thanks.


#2

I think we’ve discussed this one before. It’s a known quirk of iOS. You’ll probably have to program around it.


#3

What are your view port settings? (I don’t have this problem on any of my apps.)


#4

Thx PPetree. As of now the app is only deployed to a website and not phonegap for use in the Apple app Store. I did not think those settings in config.xml effect web apps. Is my thinking correct?


#5

AppStudio supplies the viewport setting. It’s always

<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no viewport-fit=cover' />


#6

My website:
@Gordo - George has all of the core settings. I forgo some of them on my website and have a few preferences in my mobile apps.

My website is fully responsive and has this:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

My mobile apps (index.html):

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

My config.xml

<preference name="DisallowOverscroll" value="true" />
<preference name="WebviewBounce" value="false" />
<preference name="EnableViewPortScale" value="true" />

According to the docs, in Cordova/PGB you must set EnableViewPortScale in order for your html viewport settings to have any effect.

All but webviewBounce are documented here:
https://cordova.apache.org/docs/en/latest/config_ref/


#7

Still have this problem and my index.html has the following automatically

Anyone have any ideas?