Mobile browsers window height & page scaling

问题

For wide pages with scaling where is starge behavior for mobile browsers: $(window).height() (and document.documentElement.clientHeight) returns wrong heignt. Result is less when actually. The difference is about 10%

Simple test page:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
  <div style="width: 1200px">
    <div class="test-block" style="background-color: red">
      test block
    </div>
  </div>
<script type="application/javascript">
   var h = $(window).height();
   $('.test-block').css('height', h+'px');
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
page bottom<br/>
</body>
</html>

As result, the red box have height less then window height

All works well after removing of width: 1200px => Problem in page scaling (auto fit by page width).

How to get correct window height for page with scaling?

window.innerHeight return very funny result after zooming.

Tested on iphone (safari & chrome), ipad, android 4 (chrome). For Opera mobile the difference is bigger

回答1:

To stop the page from scaling try adding the following tag to your head section.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

You could get the width and scale it afterwards via JavaScript if you really have to (which you shouldn't - make it responsive instead).

来源：https://stackoverflow.com/questions/24395513/mobile-browsers-window-height-page-scaling

标签

javascript

jquery

css

browser

mobile-safari