iPhone忽略所有媒体查询答案

【问题标题】：iPhone ignoring all media queriesiPhone忽略所有媒体查询
【发布时间】：2017-06-26 03:57:14
【问题描述】：

该网站几个月前运行良好。突然没有 iPhone 正在读取 css 文件中的单个媒体查询。我做了以下事情：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

包含在我的 html 文件中。

/* Iphone 6 plus portrait & landscape */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {

包含在我的 CSS 文件中

尝试了以下方法：

@media all and (min-device-width : 414px) and (max-device-width : 736px) {

and (-webkit-min-device-pixel-ratio : 3) 

and (min-resolution: 401dpi) 
and (device-aspect-ratio:16/9)

什么都没有。

我检查了 CSS 文件是否正在加载。

当我通过 Chrome 在我的 Windows PC 上以 iPhone 6+ 的分辨率查看该网站时，它看起来很完美。但是客户端，以及我尝试过的每一个 iPhone 模拟器，都没有显示任何媒体查询。我实际上没有 iPhone，但客户有。

谁能解释一下这是怎么发生的？缺少什么？请帮忙。

【问题讨论】：

标签： css iphone media-queries

【解决方案1】：

显然，解决方案是在每个最大设备宽度和最小设备宽度旁边添加 (max-width) / (min-width)。这使得查询：

@media only screen and (min-device-width : 414px) 
 and (max-device-width : 736px) 
 and (orientation : portrait), 
 only screen and (min-width: 414px) 
 and (max-width : 736px) and (orientation : portrait) { }

这正在模拟器上运行，将进一步测试并在需要时添加更多内容。

【讨论】：