Question

我不知道它为什么不起作用，但我在CSS的末尾设置了这个：

@media only screen and (max-width: 480px),
only screen and (max-width: 480px) and (-moz-min-device-pixel-ratio: 3/2), 
only screen and (max-width: 480px) and (-o-min-device-pixel-ratio: 3/2), 
only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 3/2), 
only screen and (max-width: 480px) and (min-device-pixel-ratio: 3/2),
only screen and (max-width: 480px) and (-moz-min-device-pixel-ratio: 2), 
only screen and (max-width: 480px) and (-o-min-device-pixel-ratio: 2/1), 
only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2), 
only screen and (max-width: 480px) and (min-device-pixel-ratio: 2),
only screen and (max-width: 480px) and (-moz-min-device-pixel-ratio: 3), 
only screen and (max-width: 480px) and (-o-min-device-pixel-ratio: 3), 
only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 3), 
only screen and (max-width: 480px) and (min-device-pixel-ratio: 3),
only screen and (max-width: 480px) and (device-aspect-ratio: 9/16){ 
my style blablabla
}

但我的HTC One和旧款iPhone 4都不能识别这款CSS。三星Wildfire上的问题相同。如果我调整浏览器大小或在http://iphone4simulator.com/上预览它，效果会非常好。

我做错了什么？

Answer 1

尝试在文档的头部添加此内容。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1., user-scalable=yes, target-densityDpi=device-dpi">

我有类似的问题。我认为这是因为智能手机具有更高的像素密度，因此您需要上述代码以确保您的媒体查询按预期执行。

Alex

使用媒体查询寻址智能手机屏幕

1 个答案: