スマホのウインドウリサイズと後処理の問題とユーザーエージェントの判別

2016/2/7 2016/5/17 デザインの現場？

ハイ！　リサです。

前回の記事で、ウインドウのリサイズを判定し、初期化処理（リロード）を話題にしました。

過去記事ウインドウのリサイズ終了後に画面をリロードする方法

しかし、この方法だけだと不十分なので、追加しておきます。

スマホのウインドウリサイズの対応

テストしてみると、スマホの場合もウインドウリサイズイベントが発生します。

スマホのブラウザーは見た目上、画面いっぱいに表示されています。
そのため、縦にしたり、横にしたりしなければ、ウインドウのリサイズは起こらないように見えます。

しかし、実際には画面を一番下までスクロールした際に、ウインドウリサイズイベントが発生します。

このため、前回話題にしたようにウインドウリサイズでリロードしてしまうと、スマホのスクロール時にリロードが発生してしまいます。
処理性能としても好ましいことではありません。

そこで、スマホの場合はユーザーエージェントを判定し、リロード処理を抑制することにしました。
また、タブレットもスマホの処理に準ずることにします。

JavaScriptによるユーザーエージェントの判定

ウインドウがリサイズされた場合にリロードを行うロジックでしたので、スマホとタブレットの場合は後処理を抑止する判定を行えば、問題はクリアされます。
そこで、ユーザーエージェントを判定しPC、スマホ、タブレットの切り分けを行うことにしました。

JavaScriptによるユーザーエージェントの判定は以下のページを参考にさせて頂きました。

参照2015年版JavaScriptユーザエージェント判別・判定（W3G）

javaScript


var _ua = (function(u){
return {
Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1)
|| u.indexOf("ipad") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
|| u.indexOf("kindle") != -1
|| u.indexOf("silk") != -1
|| u.indexOf("playbook") != -1,
Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
|| u.indexOf("iphone") != -1
|| u.indexOf("ipod") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
|| u.indexOf("blackberry") != -1
}
})(window.navigator.userAgent.toLowerCase());

jQuery


$(function(){
if(_ua.Mobile || _ua.Tablet){
//この中のコードはスマホとタブレットにのみ適用
}else{
//この中のコードはスマホとタブレット以外に適用
var timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
//リロードする
location.reload();
}, 200);
});
}
});

やってみてね。

See you !