JavaScriptのinnerWidthとinnerHeightについて-PHPチュートリアル-php.cn

JavaScriptのinnerWidthとinnerHeightについて

一个新手

リリース： 2023-03-16 15:44:02

オリジナル

1413 人が閲覧しました

innerWidth プロパティと innerHeight プロパティ

説明: window オブジェクトの読み取り専用プロパティは、ウィンドウのドキュメント表示領域の高さと幅をピクセル (px) 単位で宣言します。 (注: ここでの幅と高さには、メニューバー、ツールバー、スクロールバーなどの高さは含まれません)

以下では、これら 2 つのプロパティを確認します:

画面解像度: 1920x1080 ブラウザ: QQ ブラウザ (カーネルChrome) コードは次のとおりです:

 var width=window.innerWidth,height=window.innerHeight;         //分别定义width和height接收窗口的高和宽
     alert(width);        //窗口的宽度 1920px
     alert(height);   　　//窗口的高度  950px

ログイン後にコピー

innerWidth はブラウザの両側に障害物がないため、1920 の画面幅が完全に取得され、ブラウザにツールバーがあるため innerHeight が使用され、ディスプレイ上のタスクバーが 130 ピクセルに絞り出されていました

今回、ブロガーはタスクバー (実際には非表示) とツールバーのタブを削除し、F12 を押して開発者向けオプションを追加して再度テストしました:

     /*————————干掉任务栏后————————*/
     var width=window.innerWidth,height=window.innerHeight;        
     alert(width);        //宽度没有变化,还是1920px
     alert(height);   　　//而窗口的高度990px,表明任务栏占40px(任务栏的默认高度) 导致没有获取到全部高度

     /*————————又干掉标签页后，并加上开发者选项后————————*/
     var width=window.innerWidth,height=window.innerHeight;
     alert(width);        //1381px,说明浏览器开发者选项,对innerWidth有影响 1920-1381=549px 
     alert(height);   　　//而窗口的高度979px,任务栏占40px,标签页占了11px(990-979) 而由此得出剩下的工具栏占了1080-979=101px

ログイン後にコピー

結論: innerHeight と innerWidth は表示ウィンドウのピクセルをカウントするだけです。メニューバーやツールバーなどの外部要因が存在する場合は、外部要因をテストした後、表示ウィンドウを自動的に拡張します。以下内部スクロールバーをテストします

　　<html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                
        <title>测试innerHeight属性</title>
            
        </head>
        
        <body>
        <p style="width:500px;height:1300px;background-color:red;"></p>
        
        <script>=
                     width=window.innerWidth,height=
                     alert(height);   　　</script>
        </body>
　　 </html>

ログイン後にコピー

結論: 内部スクロールバーが存在しても幅には影響を与えないことを意味します

最終結論: innerHeight。と innerWidth はフォームを取得します高さと幅、(ブラウザーの開発者向けオプション、お気に入り) などの外部要因はそれに影響しますが、内部要因 (スクロールバー) は影響しません

IE について話しましょう最も多くの欠点、IE の互換性の問題は次のように解決できます

//兼容代码可以这样子写var width = window.innerWidth,height = window.innerHeight;if (typeof width != &#39;number&#39;) {       //如果类型不为number,表示该浏览器不支持innerWidth属性

    if (document.compatMode == &#39;CSS1Compat&#39;) {          //CSS1Compat：判断是否为标准兼容模式。
        width = document.documentElement.clientWidth;

        height = document.docuementElement.clientHeight;

    } else {  //不是标准模式,则有可能是IE6或及其以下版本(早期的浏览器对css进行解析时，并未遵守W3C标准)
        width = document.body.clientWidth;            //网页可见区域宽
        height = document.body.clientHeight;          //网页可见区域高}
        alert(width);
        alert(height);

ログイン後にコピー

以上がJavaScriptのinnerWidthとinnerHeightについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。