媒体查询不响应 iPhone 5 上的方向更改答案

【问题标题】：Media Queries not responding on to Orientation Changes on iPhone 5媒体查询不响应 iPhone 5 上的方向更改
【发布时间】：2018-04-03 04:00:45
【问题描述】：

由于某种原因，当我的网站从纵向旋转到横向或反之亦然时，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 上按预期工作。我四处搜索并弄乱了代码，但似乎没有任何效果。

如果你想看看，网站链接是here。 注意：只有主页有效

提前致谢。

【问题讨论】：

标签： iphone css orientation media-queries iphone-5

【解决方案1】：

这就是你为 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 */ }

【讨论】：

好的。我会试试的。谢谢。
第一个是必需的吗？您是否需要为每个 iOS 变体执行此操作（现在有很多：

【解决方案2】：

你必须记住逗号。

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

否则我们仍然在同一个地方，我们盯着看，想知道它是怎么可能的 D：

【讨论】：