0

On iOS the media query for orientation doesn't appear to work. The follow css is directed at my root element and on desktop I can resize the browser (Firfox) and see it change from red to green and back again. I spin my iPhone around like a mad demented fool and it remains green.

@media all and (orientation:portrait) {
    .root {
        border: 1px solid red;
    }
}

@media all and (orientation:landscape) {
    .root {
        border: 1px solid green;
    }
}

1 Answer 1

1

This is probably because your Live App is rendered inside an iframe. The media query might be implemented correctly within iframes in Firefox but not in the iPhone browser.

Unfortunately I'm not sure if there's a good way around it. You might be able to use a rougher heuristic based on width and height to guess whether you're currently in portrait or landscape.

1
  • 1
    Spot on Rajeev. I wrote up a couple of pages and included one in the other and viewed it in Safari on the phone. Orientation was based on width and height of the iframe rather than device. I'll use iOS's window.orientation. Thanks! Feb 26, 2018 at 12:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .