Question

该网站几个月前工作得非常好。突然没有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，但客户端确实如此。

任何人都可以解释一下这是怎么回事吗？缺少什么？请帮忙。

Answer 1

显然，解决方案是在每个max-device-width和min-device-width旁边添加（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) { }

这是在模拟器上工作，将进一步测试并在需要时添加更多。

iPhone无视所有媒体查询

1 个答案: