• Locked
No replies
Sat, 2014-08-09 19:46
pzbrawl
pzbrawl's picture
Offline
newbie
Last seen: 8 years 33 weeks ago
Timezone: GMT-5
Joined: 2014-08-09
Posts: 1
Points: 2

In Google Chrome emulating an iPhone5, the test page shown below works as expected: width:568 and height:320 are detected by direct media query, by Javascript media query, and by direct javascript.

On a real iPhone5, though, the direct media queries and Javascript media queries fail, even though Javascript correctly detects screen width & height. What am I missing?

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

Top
Tags: