由于某种原因,当iPhone 5从纵向旋转到横向时,它不会改变我的网站布局,反之亦然。因此,如果页面是以纵向视图加载的,我定义的纵向媒体查询会启动并调整网站,但如果它被旋转,则布局会针对纵向视图保持优化。如果我手动刷新页面,横向视图会加载,但如果手机旋转,则不会更改为纵向视图,除非再次刷新。
以下是我的CSS文档中的基本代码:
/* 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>
:
<!-- 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上也能正常工作。我到处找了找,搞砸了代码,但似乎什么都不起作用。
如果你想看一看,网站链接就在这里注意:只有主页有效
提前谢谢。
这就是您为iPhone 5 设计媒体的方式
iPhone 5在肖像&横向
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */}
横向中的iPhone 5
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPhone 5人像
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) { /* STYLES GO HERE */ }
你必须记住逗号。
@media only screen
and (min-device-width : 320px),
and (max-device-width : 568px),
and (orientation : portrait) { /* Style*/ }
否则,我们仍然在同一个地方,如果我们吃了星,想知道它是如何中毒的D: