iPad Orientation does not change screen.width or CSS @media orientation

duchaba

I have added:

in my <head> tag in a simple app that display the “window.innerWidth”, “screen.width”, “document.body.scrollWidth” and “window.orientation”.

and in the CSS I also use " @media screen and (orientation:landscape) { …}"

The window.orientation shows correct value when rotate, but on the iPad the width(s) does not change. The width(s) and orientation works on iPhone and Android phone and Android tablet.

Once again, only the iPad rotate/orientation shows correct value, but the width(s) does not change and hence the CSS @media couldn’t take effect.

Any hints on solving this on Monaca would be greatly appreciated.

jazzmeister

I am also experiencing this issue. Did anyone ever find a solution to this?

Thanks

hello

hello, did you find a solution to this problem?
now i am trouble to this problem

jamal

@hello, have you tried adding viewport-fit=cover ?

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

Jamal

hello

@jamal thanks Jamal
I did with my solution but this problem is not solve

jamal

@hello, see if the following helps:

https://stackoverflow.com/questions/12643314/javascript-max-viewport-height-after-orientation-change-android-ios

hello

@jamal thanks you so much ^^