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はいつ呼び出されますか？

javascripthtmlcssdom
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