ハイ! リサです。
前回の記事で、ウインドウのリサイズを判定し、初期化処理(リロード)を話題にしました。
しかし、この方法だけだと不十分なので、追加しておきます。
スマホのウインドウリサイズの対応
テストしてみると、スマホの場合もウインドウリサイズイベントが発生します。
スマホのブラウザーは見た目上、画面いっぱいに表示されています。
そのため、縦にしたり、横にしたりしなければ、ウインドウのリサイズは起こらないように見えます。
しかし、実際には画面を一番下までスクロールした際に、ウインドウリサイズイベントが発生します。
このため、前回話題にしたようにウインドウリサイズでリロードしてしまうと、スマホのスクロール時にリロードが発生してしまいます。
処理性能としても好ましいことではありません。
そこで、スマホの場合はユーザーエージェントを判定し、リロード処理を抑制することにしました。
また、タブレットもスマホの処理に準ずることにします。
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 !
© oh yeah Steve!