JavaScript【 サンプル 】5 ～ 画面サイズと使用ブラウザの取得方法

JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript の 画面サイズと使用ブラウザの取得方法についてのサンプルを紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. 画面サイズの取得

　
画面サイズ（ モニタ画面の解像度 ）と、ウインドウサイズ（ ブラウザの表示画面内部のサイズ ）を表示します。
表示ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
function disp() {

    getSize1();
    getSize2();
}

//画面サイズを取得する
function getSize1() {
    let size = "横幅 = " + screen.width 
               + "、　高さ = " + screen.height;
    document.getElementById("dat1").innerHTML = size;
}

//ウィンドウサイズを取得する
function getSize2() {
    let wid,hei,size;
    wid = window.innerWidth;
    hei = window.innerHeight;
    size = "横幅 = " + wid + "、　高さ = " + hei;
    document.getElementById("dat2").innerHTML = size;
}
</script>

<div style="background-color : #CCC;">
    <input type="button" value="表示" onClick="disp()">
    画面サイズ　　　　：　<span id="dat1"></span>
    ウィンドウサイズ　：　<span id="dat2"></span>
</div>

　
画面サイズは「 screen.width（ height ） 」で、ウィンドウサイズは「 window.innerWidth（ innerHeight ） 」で取得できます。
　
　
他にも、次のようなサイズを取得することができます。

　
上記の各サイズを取得するソースコードは次の通りです。

    //画面の利用可能領域（ 横幅 ）を取得
    screen.availWidth;
    //画面の利用可能領域（ 高さ ）を取得
    screen.availHeight;


    //ウインドウの外観（ 横幅 ）を取得
    window.outerWidth;
    //ウインドウの外観（ 高さ ）を取得
    window.outerHeight;


    //ドキュメント全体（ 横幅 ）を取得
    document.body.clientWidth;
    //ドキュメント全体（ 高さ ）を取得
    document.body.clientHeight;


    //ドキュメントの表示領域（ 横幅 ）を取得
    document.documentElement.clientWidth;
    //ドキュメントの表示領域（ 高さ ）を取得
    document.documentElement.clientHeight;

▲目次へ戻る

　

2. ブラウザの判定

　
現在ご使用中のブラウザを判定します。
現在の状況に応じてボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
function disp_p() {

    let userAgent = window.navigator.userAgent.toLowerCase();

    if(userAgent.indexOf("msie") != -1 || userAgent.indexOf("trident") != -1) {

        document.getElementById("dat1").innerHTML = "Internet Explorer";

    } else if(userAgent.indexOf("edge") != -1) {

        document.getElementById("dat1").innerHTML = "Edge";

    } else if(userAgent.indexOf("chrome") != -1) {

        document.getElementById("dat1").innerHTML = "Google Chrome";

    } else if(userAgent.indexOf("safari") != -1) {

        document.getElementById("dat1").innerHTML = "Safari";

    } else if(userAgent.indexOf("firefox") != -1) {

        document.getElementById("dat1").innerHTML = "FireFox";

    } else if(userAgent.indexOf("opera") != -1) {

        document.getElementById("dat1").innerHTML = "Opera";

    } else {

        document.getElementById("dat1").innerHTML = "不明です";
    }
}

function disp_m() {
    let userAgent = window.navigator.userAgent.toLowerCase();

    if(userAgent.indexOf('iphone') != -1) {

        document.getElementById("dat2").innerHTML = "iPhone";

    } else if(userAgent.indexOf('ipad') != -1) {

        document.getElementById("dat2").innerHTML = "iPad";

    } else if(userAgent.indexOf('android') != -1) {

        if(userAgent.indexOf('mobile') != -1) {

            document.getElementById("dat2").innerHTML = "androidのスマートフォン";

        } else {

            document.getElementById("dat2").innerHTML = "androidのタブレット";
        }

    } else {

        document.getElementById("dat2").innerHTML = "不明です";
    }
}
</script>

<div style="background-color : #CCC;">
    <div style="display:inline-flex; align-items: center;">
        <input type="button" value="パソコン" onClick="disp_p()">
        ご使用中のブラウザ　：　<span id="dat1"></span>
    </div>
　
    <div style="display:inline-flex; align-items: center;">
        <input type="button" value="モバイル" onClick="disp_m()">
        ご使用中のモバイル　：　<span id="dat2"></span>
    </div>
</div>

　
例えば Google Chrome を使用している場合には、「 window.navigator.userAgent.toLowerCase(); 」で取得する値は「 mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/63.0.3239.84 safari/537.36 」のような内容ですので、chrome の他に mozilla や safari の文字列も含まれてしまいます。

ですので、PCのブラウザ判定をする際には、判定する順番が重要になってきます。

Safari より Chrome を先に条件分岐させる必要があり、Chrome より Edge を先に条件分岐させる必要があります。

▲目次へ戻る