昨今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; }