1. ホーム
  2. 質問と答え
  3. JavaScriptのドキュメントのディメンションに混乱しています

JavaScriptのドキュメントのディメンションに混乱しています

2012-01-26 10 views

答えて

15

私はできるだけ簡単に答えようとします。

幾何学の観点から、注意すべき寸法の二組が存在する文献とビューポート

。ロードされたページの全体のサイズを反映するドキュメントのサイズ。ウィンドウの下部を越えるコンテンツと、ウィンドウにすぐに表示されるドキュメントの表示部分のサイズを反映するビューポートのサイズ。

下にスクロールすると、ビューポートは特定の数のピクセルだけドキュメント上を下に移動します。言い換えると、ビューポートは実際のブラウザウィンドウの境界線（ツールバー、メニュー、タブなど）です。

ブラウザとモードによって異なるプロパティがドキュメントとビューポートのサイズを取得するために使用され、スクロールバーによって異なる結果が返されるという混乱があります。しかし、我々はこれに戻ります。

次元の概要

から使用可能なプロパティの数があります。get-行くあなたに異なる寸法を与えるJavaScriptで。

  1. 画面解像度： window.screen.width -Height

  2. 利用可能な画面スペースマイナスドック、ツールバー、および他のUI要素（モニタ解像度と同じ）： window.screen.availWidth -Height。

  3. 文書のサイズ： document.documentElement.offsetWidth -Height 注：これらの数値にはスクロールバーは含まれません。

  4. ビューポートの寸法： window.innerWidth -Height

    • これらの数字は、スクロールバーが含まれています。

    • これは、IE 8とIE9で、そうIE場合、document.compatMode === "CSS1Compat"のためのテストとtrueの場合、document.documentElement.clientWidth -Heightを使用し、Quirksモードの使用document.body.clientWidth -Heightでは使用できません。上記1として

文書の寸法についてノート

、document.documentElement.offsetWidth/Heightは、文書の実際のサイズを提供します。これに留意すべき点の1つは、スクロールバーがブラウザ間で異なって動作することです。たとえば、ドキュメントの高さがビューポートの高さより小さい場合でも、IE9は常に垂直スクロールバーを表示します。 Safari/ChromeにはOS X Lionのスクロールバーはありません。 PC上のChromeは、必要がない限り、縦スクロールバーを表示しません。

したがって、矛盾が発生し、Scrollbar shifts content問題が発生する可能性があります。あなたは絶対的に配置され、中心に置かれた要素を持っていると想像してください。 CSSはスクロールバーを追加すると、ビューポートの寸法ではなくドキュメントの寸法に対する「中心」を計算するため、「ドキュメントセンター」が変更されるとコンテンツが左に少しジャンプすることがあります。したがって、あなたが気になる場合は、この効果を補うためにJSを記述する必要があります。または、スクロールバーを含むドキュメントのサイズを計算するためのすばらしいJS関数を書くことができます。

JavaScriptでいくつかの方法がドキュメント座標と連携しながら

スクロールバーの位置及び寸法は、他の人は、ビューポート座標と協力し、多くの場合、これはあなたが望むものではありません。たとえば、要素の上端が文書座標で20ピクセルで、ページを20ピクセル下にスクロールした場合、その要素の上端は、上のビューポート座標に対して0ピクセルになります。したがって、2つのシステム間で変換するには、まず、ユーザーがドキュメントをスクロールしたピクセル数を知り、その数値をビューポートに追加して補正する必要があります（下の例を参照）。

私はまた、これらが役に立ったと評価してい：

http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

http://www.quirksmode.org/mobile/viewports.html

そして、ここでは、私はあなたを助けるためにアップマック速いクロスブラウザモジュールです：

var dimensions = (function(){ 

    var dims = {}; 

    // get screen width/height: 
    dims.screenWidth = function() { window.screen.width }; 
    dims.screenHeight = function() { return window.screen.height }; 

    // get screen width/height minus chrome: 
    dims.availWidth = function() { return window.screen.availWidth }; 
    dims.availHeight = function() { return window.screen.availHeight }; 

    // get document width/height (with-out scrollbars): 
    if (window.document.compatMode == "CSS1Compat"){ // if IE Standards Mode 
     dims.documentWidth = function() { return document.body.offsetWidth }; 
     dims.documentHeight = function() { return document.body.offsetHeight }; 
    } 
    else { 
     dims.documentWidth = function() { return document.documentElement.offsetWidth }; 
     dims.documentHeight = function() { return document.documentElement.offsetHeight }; 
    } 

    // get viewport width/height (with scrollbars): 
    if (window.innerWidth != null) { 
     dims.viewportWidth = function() { return window.innerWidth }; 
     dims.viewportHeight = function() { return window.innerHeight }; 
    } 

     // if IE in Standards Mode 
     else if (window.document.compatMode == "CSS1Compat"){ 
      dims.viewportWidth = function() { 
       return window.document.documentElement.clientWidth 
      }; 
      dims.viewportHeight = function() { 
       return window.document.documentElement.clientHeight 
      }; 
     } 

    // get scrollbar offsets: 
    if (window.pageXOffset != null) { 
     dims.scrollXOffset = function() { return window.pageXOffset }; 
     dims.scrollYOffset = function() { return window.pageYOffset }; 
    } 

     // if IE in Standards Mode 
     else if (window.document.compatMode == "CSS1Compat"){ 
      dims.scrollXOffset = function() { return document.documentElement.scrollLeft }; 
      dims.scrollYOffset = function() { return document.documentElement.scrollTop }; 
     } 

    return dims; 
}());

あなたはすることができますたとえばビューポートの幅を取得するにはconsole.log(dimensions.viewportWidth())を実行します。

希望すると便利です:)

出典

2012-01-26 23:57:21 dkugappi

関連する問題

 関連する問題