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 では発生しません (正しい数値を表示するために短い遅延は必要ありません)。これらの数値を一貫して安全に取得する別の方法はありますか (十分かどうかにかかわらず、任意の遅延を導入する必要はありません)。

M;

4

1 に答える 1

0

遅すぎる可能性がありますが、これは、イベントが発生したときにまだ BEFORE 状態を見ているという事実に関係していると思います。イベントは「向きを変えようとしていますが、まだ行っていません」ということだけを伝えるため、新しい状態はイベントの後に発生します。

于 2014-02-11T18:05:15.710 に答える