Monaca Onsen UI Discord Chat Github Repo

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

  • I have added:

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

    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.

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