web-dev-qa-db-ja.com

Webサイトが画面解像度を検出する方法

http://whatsmyuseragent.com/ 画面の解像度、JavaScriptが有効、ユーザーエージェント、現地時間などを通知しますか？

ユーザーエージェントはHTTPヘッダーの一部です。 他の情報についてどうやって知るのですか？この情報を表示するためにFirefoxアドオン「ライブHTTPヘッダー」をインストールしましたが、ユーザーエージェントしか表示できませんでした。

javascripthttp-request
3
Curtis Hagen

クライアント側のJavaScriptコードがそのような情報にアクセスできるからです。

http://whatsmyscreenresolution.com/ （リンクのリンク先）に移動し、ctrl + uを押してページの（クライアント側）ソースコードを表示すると、次のようになります。 ：

_            <div class="col-md-4 col-md-offset-2 well">
                <h3>jQuery code to get window resolution:</h3>
                <p class="codeSection">
                    ; (function () {<br />
                    &nbsp; &nbsp; &nbsp;$(window).width();<br />
                    &nbsp; &nbsp; &nbsp;$(window).height();<br />
                    })();<br />
                </p>
            </div>
_

明白でない場合は、$(window).width();と$(window).height();がここで重要な部分です。

「ウェブサイト」（つまり、JavaScriptのビットを含むこのHTMLページを送信したサーバー）は、この情報に直接アクセスできないことに注意してください。彼らはあなたのブラウザがそれを送り返すJavaScriptコードの一部を実行している場合にのみ取得することができます。

windowオブジェクトのドキュメント には、サイズとスクロール位置、およびすべてのJavascriptコードがアクセスできるその他のものに関連するいくつかの追加プロパティがリストされています。

現地時間についても触れたので、 これがDateオブジェクトのドキュメントです です。重要な点は、new Date()が、ユーザーのローカルタイムゾーンの現在の日付と時刻に設定されたDateオブジェクトを作成することです。

リンクしたWebサイトでは、これは次のように行われます（その後、10秒ごとにやり直されます）。

_    function UpdateTime() {
        $('.local-time').text(formatAMPM(new Date()));
        setTimeout(function () { UpdateTime() }, 10000)
    };
_

そして最後に、ウェブサイトは、デフォルトで「いいえ」を表示することにより、JavaScriptが有効になっているかどうかを表示できます。

_            <td style="width: 50%;">JavaScript Enabled:</td>
            <td class="js-enabled bold">No</td>
_

そして、「いいえ」を「はい」に変更するJavascriptコードがあるとします。

_        $('.js-enabled').text('Yes');
_

ブラウザがJavaScriptの実行を拒否した場合、「いいえ」と表示されます。実行すると、「はい」が表示されます。

7
Ixrec

このサイトは実際にそれがどのように行われるかを示しています。 http://whatsmyscreenresolution.com/ へのリンクがあり、下に2つのスニペットが表示されます。

画面解像度を取得するJavaScriptコード：

<script type="text/javascript">
document.write(screen.width + 'x' + screen.height);
</script>

ウィンドウの解像度を取得するためのjQueryコード：

; (function () {
     $(window).width();
     $(window).height();
})();
3
Mason Wheeler