0

I'm new to adaptive/responsive web development. I'm confused over how mobile devices handle the change of screen resolution when the orientation of the device is changed.

If I create two media queries - one for 320 (portrait) and one for 480 (landscape), the iphone only loads the 320 version, regardless of the orientation, adn just zooms to fill the screen.

Is there a way of delivering the new 480 styles when the iphone is loaded in landscape position, or when the iphone is tilted from portrait to landscape?

2 Answers 2

3

First of all media queries have a property that you probably discovered

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

You could force render on the iPhone via

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

and then use some css to target landscape mode

@media screen and (min-width: 321px){
  //styles
}
1

CSS media queries are a bit tricky with orientation form a device to another. You still have a good js option:

window.addEventListener('orientationchange', changeOrientation, false);

function changeOrientation() {
if (orientation == 0 || orientation == 180) {
  //portraitMode
}
else {
  //LandscapeMode
}
1
  • This answer has fixed a different but related problem I had. Done purely in CSS, changing from full screen landscape to portrait (iPad 2) has a odd effect where the background doesn't stretch all the way to the bottom first time round. i44.tinypic.com/5a5bhj.jpg You have to rotate back to landscape then portrait again for it to work. Dec 17, 2013 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.