媒体查询未响应iPhone 5上的定向更改 [英] Media Queries not responding on to Orientation Changes on iPhone 5
问题描述
由于某些原因，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.
以下是我的CSS文档的基本代码：
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*/
}
这是来自我的HTML的< head> 文件：
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" />
这个问题只发生在iPhone 5.媒体查询在其他iPhone上正常工作。我已经搜索过，弄乱了代码，但似乎没有工作。
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
提前感谢。
推荐答案
这是您为iPhone 5设计媒体样式的方式
This is how you style media for iPhone 5
iPhone 5在纵向& landscape
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
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纵向
iPhone 5 in portrait
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) { /* STYLES GO HERE */ }
这篇关于媒体查询未响应iPhone 5上的定向更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
