web-dev-qa-db-ja.com

ビューポートとウィンドウ対ドキュメント

以下のコードでは、

document.documentElement.clientWidth
   1349
document.documentElement.clientHeight
   363
window.innerWidth
   1366
window.innerHeight
   363
window.screen.height
   768
window.screen.width
   1366

したがって、私のデスクトップ画面は幅1366ピクセル、高さ768ピクセルです。

私はそれを学びました、

ビューポートのディメンションは、document.documentElement.clientWidthおよびdocument.documentElement.clientHeightを使用して参照されます。

ウィンドウの寸法は、window.innerWidthおよびwindow.innerHeightを使用して参照されます。

1)ビューポートとドキュメントの違いは何ですか?

2)window.onload Vs document.onloadはいつ呼び出されますか?

24
overexchange

ページが画面よりも大きい場合、状況は異なります。

ビューポートは、物が見える長方形の領域です。ドキュメントはそれより大きくなる場合があり、その場合はスクロールバーが表示されます。

2番目の質問: window.onload vs document.onload

以下に要約を示します。

Viewport:これはデバイス画面です。

Window:これはブラウザのウィンドウです。ウィンドウは、ビューポートと同じかそれより小さくすることができます。

ドキュメント:これはウェブページです。ビューポートより大きくても、ウィンドウより大きくてもかまいません。

注:一部のWebサイトは、モバイル用に作成されていません。したがって、ウェブページ/ドキュメントはモバイルビューポートよりもはるかに大きく、画面の外にこぼれた部分を見るにはスワイプする必要があります。デスクトップでは、ブラウザのウィンドウを小さくしたり、ビューポート/モニターと同じにしたりできます。

21
TwilightSun

ドキュメント:

documentは、ページのDOM(Document Object Model)を表すJavaScriptのオブジェクトです。ドキュメントオブジェクトは、ページ構造全体(すべてのHTML要素など)の表現なので、次のようにします。

document.documentElement.clientHeight
document.documentElement.clientWidth

<html>要素の幅を与える必要があります

ビューポート:

これを使用して:

window.innerWidth
window.innerHeight

ブラウザ内のウィンドウの実際の表示(物理)寸法を提供します。スクロールバーを除く

window.onLoad

window.onload(a.k.a body.onload)は、メインのHTML、すべてのCSS、すべての画像、および他のすべてのリソースが読み込まれてレンダリングされた後に発生します。

document.onLoad

dOMの準備ができたときに呼び出されます。これは、画像やその他の外部コンテンツがロードされる前の場合があります。

8
Chris Halcrow