iphone 5 上的媒体查询失败答案

【问题标题】：media queries fail on iphone 5iphone 5 上的媒体查询失败
【发布时间】：2014-10-02 15:18:11
【问题描述】：

在模拟 iPhone5 的 Google Chrome 中，测试页面按预期工作：通过直接媒体查询、Javascript 媒体查询和简单 javascript 检测到 width=568 和 height=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>

【问题讨论】：

标签： javascript css iphone media-queries

【解决方案1】：

您可能想从 QuirksMode 阅读这些幻灯片：

http://www.quirksmode.org/presentations/Spring2014/viewports_sf2.pdf

问题可能是媒体查询没有很好地定义（因为screen.width没有很好地定义）。

【讨论】：