ブラウザサイズを取得して、値を表示させブラウザが縦長なのか横長なのかを大まかに判定させる為に下記のコードをかいてみました。スマートフォン向けに使おうと思ったのですが、結局使いませんでした。ただ他に使う機会があるかもしれないので、備忘録として残しておこうと思います。
【css】
.get-windowSize {
position: fixed;
top: 100px;
left: 30px;
color: #000;
}
.get-windowSize-width,
.get-windowSize-height {
width: 200px;
}
jQuery】
var timer = false;
$(function() {
//読み込み時実行
setBg();
//リサイズしたら実行
$(window).resize(function(){
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
setBg();
}, 200);
});
});
function setBg() {
var winW = $(window).width();
var winH = $(window).height();
if(winW>=winH){
//横長
$('.tilt').text('横長');
$("body").addClass("landscape");
}else {
//縦長
$('.tilt').text('縦長');
$("body").addClass("portrait");
}//endif
$('.get-windowSize-width').text('横'+winW);
$('.get-windowSize-height').text('縦'+winH);
}
【html】
<div class="get-windowSize">
<p class="get-windowSize-width"></p>
<p class="get-windowSize-height"></p>
<p class="tilt"></p>
</div>
