Question

我正在使用jqtouch.js（使用zepto.js）并测试 onorientationchange 事件：

http://www.ebi.ac.uk/~mp/test_orientation.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <!-- Local jqTouch -->
    <link rel="stylesheet" href="lib/jqtouch-1.0-b4-rc/themes/css/apple.css" title="jQTouch">
    <!-- <style type="text/css" media="screen">@import "lib/jqtouch-1.0-b4-rc/themes/css/jqtouch.css";</style> -->
    <script src="lib/jqtouch-1.0-b4-rc/src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/jqtouch-1.0-b4-rc/src/jqtouch.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
      var jQT = new $.jQTouch({});
    </script>

  </head>
  <body>
    <h1>Hello World</h1>
    <script>
       window.onorientationchange = function() {
         var w = document.documentElement.clientWidth;
         var h = document.documentElement.clientHeight;
         alert("WIDTH: " + w + " -- HEIGHT: " + h);
       }
    </script>
  </body>
</html>

使用默认的Android浏览器打开此页面我将clientWidth和clientHeight数字反转（当将方向更改为横向时，我获得的高度超过宽度，反之亦然）。如果我插入一个短暂的延迟：

http://www.ebi.ac.uk/~mp/test_orientation_delay.html

<script>
   window.onorientationchange = function() {
     setTimeout(function() {
       var w = document.documentElement.clientWidth;
       var h = document.documentElement.clientHeight;
       alert("WIDTH: " + w + " -- HEIGHT: " + h);
     }, 500);
   }
</script>

正确检索clientWidth和clientHeight。 Safari（iOS5）或Chrome（它们不需要短暂的延迟来显示正确的数字）就不会发生这种情况。是否有一种替代方法可以一致地安全地检索这些数字（无需引入足够或不足的任意延迟）？

米;

Answer 1

可能为时已晚，但我认为这与事件发生时的事实有关，即你仍然在关注BEFORE状态。新的状态将在事件发生后发生，因为事件只告诉你“我正在改变方向，但还没有做到。”

Android默认浏览器上的clientWidth和clientHeight延迟了吗？

1 个答案: