JavaScript高級プログラム設計のBOMのwindowオブジェクトのウィンドウサイズ8.1.4ノートを言います.
2795 ワード
ブラウザをまたいでウィンドウのサイズを決めるのは簡単なことではない.IE 9+、Firefox、Safari、OperaおよびChromeは、このために4つの属性を提供しています.inner Width、inner Height、outerWidthおよびouterHeight.IE 9+、SafariおよびFirefoxでは、outerWidthおよびouterHeightは、ブラウザウィンドウ自体のサイズに戻る(最外層のwindowオブジェクトからも、あるフレームからもアクセスする).Operaでは、この2つの属性の値はページビューコンテナ①のサイズを表します.innerWidthとinnerHeightはこの容器のページビューエリアの大きさを表しています.Chromeでは、outer Width、outerHeightとinner Width、inner Heightは、ブラウザウィンドウサイズではなく、同じ値を返します.IE 8および以前のバージョンは、現在のブラウザのウィンドウサイズを取得する属性を提供していない.しかし、DOMを介してページ可視領域に関する情報を提供しています.IE、Firefox、Safari、Opera、およびChromeにおいて、document.documentElement.client Widthとdocument.document.document.clint Heightにはページビューの情報が保存されている.IE 6では、これらの属性は標準モードでのみ有効である必要がある.混雑モードであれば、Dcument.body.clientWidthとDcument.body.client Heightで同じ情報を取得しなければなりません.混雑モードのChromeは、document.document-mentまたはdocument.bodyのclient WidthとclientHeight属性を問わず、視認口の大きさを取得することができる.ブラウザウィンドウ自体のサイズは最終的には確認できませんでしたが、ページビューのサイズは以下のようになります.
pageWidthとpageHeight.その後、PageWidthに保存されているのが数値であるかどうかを確認する.もしそうでないなら、検査を通過します.
document.com mpatMode(この属性は第10章で全面的に議論されます)はページが標準モードにあるかどうかを判定します.もしそうなら
document.documentElement.client Widthとdocument.documentElement.clint-をそれぞれ使用します.
ヘightの値.そうでなければ、document.body.clientWidthとdocument.body.clientHeightの値を使います.
モバイルデバイスに対しては、window.inner Widthとwindow.inner Heightは可視視認口、つまりスクリーン上に保存されています.
ページ範囲のサイズを参照してください.移動IEブラウザはこれらの属性をサポートしていませんが、document.documentElement.client-
Widthとdocument.documentElement.clientHeihgtは同じ情報を提供しています.ページの拡大縮小に伴い、これらの値は
それに応じて変化します.
他のモバイルブラウザでは、document.documentElementメトリックは、レイアウトビュー、すなわちレンダリング後のページの実際の大きさです.
小さい(可視視口と違って、視認口はページ全体の一部にすぎない).モバイルIEブラウザはレイアウトビューの情報を保存します.
Dcument.body.client Widthとdocument.body.clientHeightの中です.これらの値はページの拡大縮小によっては変わりません.
デスクトップブラウザとの間にはこれらの違いがありますので、まずユーザーがモバイルデバイスを使っているかどうかを確認してから使うことを決めたほうがいいです.
どの属性ですか
モバイル機器の視認口に関する話題は複雑で、非日常的なものが多く、さまざまな提案があります.モバイル開発コンサルタントのPeter-Paul Kuchは彼のこの問題に対する研究を記述しています.http://t.cn/zOZs0Tz.モバイルWebの開発をしているなら、この文章を読んでみてください.また、ブラウザウィンドウのサイズをリゾット()とリゾービー()で調整することができます.これらの2つの方法は、ブラウザウィンドウの新しい幅と高さを受信し、新しいウィンドウと元のウィンドウの幅と高さの差を受信する2つのパラメータを受信する.次の例を見ます.
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
WindowSizeExample01.htm
——————————
① “ ” Opera 。
上記のコードの中で、まずwindow.innerWidthとwindow.inner Heightの値をそれぞれ与えました.pageWidthとpageHeight.その後、PageWidthに保存されているのが数値であるかどうかを確認する.もしそうでないなら、検査を通過します.
document.com mpatMode(この属性は第10章で全面的に議論されます)はページが標準モードにあるかどうかを判定します.もしそうなら
document.documentElement.client Widthとdocument.documentElement.clint-をそれぞれ使用します.
ヘightの値.そうでなければ、document.body.clientWidthとdocument.body.clientHeightの値を使います.
モバイルデバイスに対しては、window.inner Widthとwindow.inner Heightは可視視認口、つまりスクリーン上に保存されています.
ページ範囲のサイズを参照してください.移動IEブラウザはこれらの属性をサポートしていませんが、document.documentElement.client-
Widthとdocument.documentElement.clientHeihgtは同じ情報を提供しています.ページの拡大縮小に伴い、これらの値は
それに応じて変化します.
他のモバイルブラウザでは、document.documentElementメトリックは、レイアウトビュー、すなわちレンダリング後のページの実際の大きさです.
小さい(可視視口と違って、視認口はページ全体の一部にすぎない).モバイルIEブラウザはレイアウトビューの情報を保存します.
Dcument.body.client Widthとdocument.body.clientHeightの中です.これらの値はページの拡大縮小によっては変わりません.
デスクトップブラウザとの間にはこれらの違いがありますので、まずユーザーがモバイルデバイスを使っているかどうかを確認してから使うことを決めたほうがいいです.
どの属性ですか
モバイル機器の視認口に関する話題は複雑で、非日常的なものが多く、さまざまな提案があります.モバイル開発コンサルタントのPeter-Paul Kuchは彼のこの問題に対する研究を記述しています.http://t.cn/zOZs0Tz.モバイルWebの開発をしているなら、この文章を読んでみてください.また、ブラウザウィンドウのサイズをリゾット()とリゾービー()で調整することができます.これらの2つの方法は、ブラウザウィンドウの新しい幅と高さを受信し、新しいウィンドウと元のウィンドウの幅と高さの差を受信する2つのパラメータを受信する.次の例を見ます.
// 100×100
window.resizeTo(100, 100);
// 200×150
window.resizeBy(100, 50);
// 300×300
window.resizeTo(300, 300);