Media Queries not responding on to Orientation Changes on iPhone 5

问题

For some reason, the iPhone 5 doesn't change the layout of my site when it is rotated from portrait to landscape or visa-versa. So, if the page is loaded in portrait view, the portrait media queries I have defined kick at and adjust the site, but then if it is rotated, the layout stays optimized for portrait view. If I manually refresh the page though, the landscape view loads, but won't change to portrait if the phone is rotated, unless it is refreshed again.

Here is the basic code from my CSS document:

/* Normal CSS for Desktop Site*/

@media only screen and (orientation:landscape) and (max-device-width: 568px), (max-width: 568px){

/*iPhone 5 Landscape Styles */

}

@media only screen and (orientation:landscape) and (max-device-width: 480px), (max-width: 480px){

/*iPhone 4/4s Landscape Styles*/

}

@media only screen and (orientation:portrait) and (max-device-width: 320px), (max-width: 320px){

/*All iPhones Portrait Styles*/

}

And this is from the <head> of my HTML files:

<!-- WEB APP META -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" />  
<link href="/img/webapp/default-iphone5.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/img/webapp/default-iphone@2x.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link rel="apple-touch-icon" sizes="114x114" href="/img/webapp/touch-icon-114.png" />

This issue only happens on the iPhone 5. The media queries work as expected on other iPhones. I've searched around and messed with the code, but nothing seems to be working.

The website link is here if you want to take a look. Note: Only the home page works

Thanks in advance.

回答1:

This is how you style media for iPhone 5

iPhone 5 in portrait & landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */}

iPhone 5 in landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 5 in portrait

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

回答2:

You've to remember comma.

  @media only screen 
  and (min-device-width : 320px),
  and (max-device-width : 568px),
  and (orientation : portrait) { /* Style*/ }

Otherwise we're still at the same place were we stareted and wondering how it's poissible D:

来源：https://stackoverflow.com/questions/17637833/media-queries-not-responding-on-to-orientation-changes-on-iphone-5

标签

iphone

css

orientation

media-queries

iphone-5