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)。

Iphone 媒体查询不工作，而其他的可以

Iphone media query is not working while others are

css

media-queries