ホームページ  >  記事  >  ウェブフロントエンド  >  window.screen オブジェクトのアプリケーションを簡単に理解する

window.screen オブジェクトのアプリケーションを簡単に理解する

WBOY
WBOYオリジナル
2022-08-05 10:34:251858ブラウズ

この記事では、javascript に関する関連知識を提供します。主に window.screen オブジェクトのアプリケーションに関連する問題を紹介します。window.screen オブジェクトには、ユーザーの画面に関する情報が含まれています。一緒に話しましょう。 . ぜひご覧ください。皆さんのお役に立てれば幸いです。

window.screen オブジェクトのアプリケーションを簡単に理解する

[関連する推奨事項: JavaScript ビデオ チュートリアルWeb フロントエンド]

ウィンドウ オブジェクト

すべてのブラウザが window オブジェクトをサポートしています。ブラウザウィンドウを表します。

すべての JavaScript グローバル オブジェクト、関数、および変数は、自動的に window オブジェクトのメンバーになります。

グローバル変数は、ウィンドウ オブジェクトのプロパティです。

グローバル関数は、ウィンドウ オブジェクトのメソッドです。

HTML DOM のドキュメントもウィンドウ オブジェクトのプロパティの 1 つです:

window.document.getElementById("header");

これと同じ:

document.getElementById("header");

ウィンドウ サイズ

ブラウザ ウィンドウ (ツールバーとスクロール バーを除くブラウザのビューポート) のサイズを決定するには 3 つの方法があります。

Internet Explorer、Chrome、Firefox、Opera、Safari の場合:

window.innerHeight - ブラウザ ウィンドウの内側の高さ window.innerWidth - ブラウザ ウィンドウの内側の幅

Internet Explorer 8、7、6、5 の場合:

document.documentElement.clientHeight document.documentElement.clientWidth

または

document.body.clientHeight document.body.clientWidth

実用的な JavaScript ソリューション (すべてのブラウザをカバー):

Example

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

この例では、ブラウザ ウィンドウの高さと幅が表示されます: (ツールバー/スクロールバーを除く)

ウィンドウ画面

window.screen オブジェクトには、ユーザーの画面に関する情報が含まれています。

window.screen オブジェクトは、window プレフィックスを使用せずに記述することができます。

いくつかのプロパティ:

  • screen.availWidth - 利用可能な画面幅

  • screen .availHeight - 利用可能な画面の高さ

ウィンドウ画面の利用可能な幅 screen.availWidth プロパティは、ウィンドウ タスク列などのインターフェイス機能を除いた、訪問者の画面の幅をピクセル単位で返します。

画面の利用可能な幅を返します:

<script>
document.write("可用宽度: " + screen.availWidth);
</script>

上記のコードの出力は次のとおりです:

window.screen オブジェクトのアプリケーションを簡単に理解する

#ウィンドウ画面の利用可能な高さ

screen.availHeight プロパティは、ウィンドウ タスクバーなどのインターフェイス機能を除いた、訪問者の画面の高さをピクセル単位で返します。

画面の利用可能な高さを返します:

<script>
document.write("可用高度: " + screen.availHeight);
</script>

上記のコードは出力します:

window.screen オブジェクトのアプリケーションを簡単に理解する

【関連推奨:

JavaScript ビデオ チュートリアル Web フロントエンド ]

以上がwindow.screen オブジェクトのアプリケーションを簡単に理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。