昨今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では回転後の値が返ってくる)
【URL】
http://jsrun.it/kimmy/4MbV
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;
}