在模拟iPhone5的Google Chrome中，测试页面按预期工作:通过直接媒体查询、Javascript媒体查询和简单Javascript检测到宽度=568和高度=320。然而，在真正的iPhone5中，直接媒体查询和javascript媒体查询失败，即使javascript正确检测屏幕宽度&高度。我错过了什么?
<html>
<head>
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0" />
<style>
@media screen and (device-height:320px) and (device-width:568px) {
.deviceID:after {
content: ' ht=320 wid=568';
}
}
@media screen and (device-height:560px) and (device-width:320px) {
.deviceID:after {
content: ' ht=568 wid=320';
}
}
</style>
<body>
<script>
var mq;
mq = window.matchMedia( "(device-height:320px)" ); ht320=mq.matches;
mq = window.matchMedia( "(device-width:480px)" ); wid480=mq.matches;
mq = window.matchMedia( "(device-width:568px)" ); wid568=mq.matches;
mq = window.matchMedia( "(resolution:2.0dppx)" ); res20=mq.matches;
var res = window.devicePixelRatio?window.devicePixelRatio:1;
var or = window.orientation;
var aht = getHeight();
var awid = getWidth();
var ht = screen.height;
var wid = screen.width;
var or = getOrientation();
document.write( "<span class='deviceID'>Device: </span>" +
"<br>Ht320="+ht320 + " wid480="+wid480 + " wid568="+wid568 +
" res20="+res20 +
"<br>Size="+wid+"x"+ht + " avail="+aht+"x"+awid + " orien="+or +
" res=" + res
);
function getOrientation() {
var vor = window.orientation;
return (vor==undefined) ? "landscape" :
( Math.abs(window.orientation)-90 == 0 ? "landscape" : "portrait" );
}
function getWidth(){
return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
}
function getHeight(){
return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
}
</script>
</body>
</html>
您可能想从QuirksMode:
阅读这些幻灯片:http://www.quirksmode.org/presentations/Spring2014/viewports_sf2.pdf问题可能是媒体查询没有很好地定义(因为screen.width没有很好地定义)。