Iphone媒体查询无效，而其他人

Question

我有一些ipad，galaxy等的媒体查询。虽然ipad和galaxy的工作完美，但iphone却没有。有谁知道我做错了什么？

我的查询（按此顺序）：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

}

@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 640px) 
and (orientation : portrait) {

}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {

}

这一切都来自responsive.css，我也有一个默认的css文件，但该文件覆盖响应的文件没有意义，因为galaxy和ipad媒体查询有效。

Answer 1

删除所有这些查询并将其替换为仅此查询。它适用于iPad和iPhone的两种方向。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

我不是100％具体的。但我认为您当前的查询彼此冲突。例如..

屏幕宽度为400px的设备将属于： (min-device-width : 320px) and (max-device-width : 568px) 和 (min-device-width : 360px) and (max-device-width : 640px)。