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/[email protected]" 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.
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 */ }