こんにちは!今日も元気にお仕事しています!|n'ω'`|
$(window).on('load resize',function() {
var $h = $(window).innerHeight(), // <---
h = window.screen.height; // <---
// spの時のみ読み込み
if ($w < 960) {
iphoneCheck($h);
}
});
function iphoneCheck(h) {
var ua = navigator.userAgent.toLowerCase(),
$t = $('.js_test_img').find('img'),
$tw = $t.attr('width'),
mini = function() { $t.attr('width', '90%'); },
normal = function() { $t.attr('width', '100%'); };
if(ua.indexOf('iphone') != -1) {
// iphone 4 or iphone 5
if ( h == 480 || h == 568 ) {
mini();
// クリア
} else {
normal();
}
} else {
// 基本的にここ走ることはないですが、デバックツールで閲覧された時用にクリア
if ($tw !== '100%') {
normal();
}
return;
}
}
今回はこのコードを書いていく上で「ファ。。!!!?」となったことをメモします。
やりたかったことは、
・特定の画像の表示倍率をiphone4とiphone5で変える
・それ以外では戻す。
です。|n'ω'`|(定数で数字をいれているのは、ごめんなさい。
本題ですが、window.screen.height;でとった時にデバックツールで意図したサイズが返ってこなかった時がありました。
resizeイベントを走らせるたびに再取得しているので、デバイスをロテートさせたときにも走りますよね、と思っていたら、
走るは走るけど、
$(window).on('resize',function(){
var $h = $(window).innerHeight();
var h = window.screen.height;
console.log($h,h)
})
の返り値は、
773 773
1024 1024
773 773
839 1024
773 773
667 667
773 773
375 667
773 773
320 320
773 773
375 375
773 773
320 320
773 773
568 320
773 773
320 320
773 773
568 568
773 773
375 568
773 773
568 375
773 773
320 320
773 773
568 568
773 773
375 375
773 773
568 568
773 773
375 568
と太字のところに誤差が。。
innerHeightの方がロテートしたときも、しっかりとれているようにみえる。
そんなころころとデバイスを変えて、ロテートしてってのは、実際のユーザさんのデバイスではあんまり考えにくい挙動なのではあるけれど、デバックツールで閲覧されたときに「こ、こいつはロテートしてもかわんねえじゃないですかーー(^Д^)9m」っていうのが万が一にもあった場合に、「そこも考えましたし!」と伝えるための自己満足のための対策なのですが、、、、
原因(自分なりに出した
$(window).innerHeight();
表示領域の高さを取得します。
つまり、どれくらい表示できるサイズなのか、の取得
私たちが表示領域として使うことのできる範囲の特定ができる、ぽい。
window.screen.height;
参考:https://developer.mozilla.org/ja/docs/Web/API/Screen/height
参考:http://q.hatena.ne.jp/1165816475
「画面の高さを取得」
この、画面っていうのが、実にふわっとしているのですが、、、
スクリーンってついているから、あくまでそのデバイスの大きさ?をかえしてくれてるのかな、とおもったりしました。
ロテートしたときにうまく反映されないのは、そのせいかもしれないです。
いやー、、もやっとしてますね、、、|n'ω'`|
もし、原因をすぱっとわかる方がいらっしゃいましたらご教授いただけますと幸いです、、
[追記]
resize後に、値を取得するタイミングが違う疑惑が浮上。。。。!
window.screenオブジェクトの取得タイミングが、原因みたいな説が他のエンジニアの方と検証していて発覚しました。