0

我正在使用 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 不会发生这种情况（它们不需要短暂的延迟来显示正确的数字）。是否有另一种方法可以安全地一致地检索这些数字（不必引入可能足够或不够的任意延迟）？

米；

4

1 回答 1

0

可能为时已晚，但我认为这与事件触发时您仍在查看 BEFORE 状态这一事实有关。新状态将在事件之后发生，因为事件仅告诉您“我即将改变方向，但还没有这样做。”

于 2014-02-11T18:05:15.710 回答