2017-03-29

windowの幅・高さ系の情報を表示するシンプルなページをつくりました。 😊

昨今JSで画面幅に合わせたコンテンツをつくる事が増えてきており、
画面の幅、高さ系の情報を確認できるページをつくってみました。

inner-width => 表示領域の幅
inner-height => 表示領域の高さ
screen-width => 画面の幅
screen-height => 画面の高さ
avail-width => 水平時の幅
avail-height => 水平時の高さ
viewport-width => 100vwの要素の幅
viewport-height => 100vhの要素の幅

を表示します。
AndroidとiOSでavailWidth、availHeightの扱いが異なるようです。
（iOSではポートフォリオ時の値が返ってきて、Androidでは回転後の値が返ってくる）

f:id:kimizuka:20170329154543p:plain

JavaScript

$(window).on("resize", function() {
    $("#inner-width").text(window.innerWidth);
    $("#inner-height").text(window.innerHeight);
    $("#screen-width").text(window.screen.width);
    $("#screen-height").text(window.screen.height);
    $("#avail-width").text(window.screen.availWidth);
    $("#avail-height").text(window.screen.availHeight);
    $("#viewport-width").text($("#vw").width());
    $("#viewport-height").text($("#vh").width());
}).trigger("resize");

CSS

body {
    font: 10px "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", sans-serif;
    color: #f8f8f2;
    background: #272822;
}

p {
    margin: 2px;
}

span {
    color: #ae81ff;
}

#vw {
    margin: 0; padding: 0;
    width: 100vw;
}

#vh {
    margin: 0; padding: 0;
    width: 100vh;
}

HTML

body {
    font: 10px "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", sans-serif;
    color: #f8f8f2;
    background: #272822;
}

p {
    margin: 2px;
}

span {
    color: #ae81ff;
}

#vw {
    margin: 0; padding: 0;
    width: 100vw;
}

#vh {
    margin: 0; padding: 0;
    width: 100vh;
}