レスポンシブ・デザインのランディングページで、jQueryプラグイン「slider.js」を使って、フル画面の画像tickerを設置しました。
しかし、小さい画面からブラウザのウインドウを広げた際、画像が足りない現象が起きてしまいました。
ランディングページなので、なるべく簡単に対処したかったので、リロードすることにしました。
Contents
現象
ブラウザ画面を大きくドラッグするとフル画面の画像が途中で終わってしまいます。
※上のウインドウサイズから下のウインドウサイズに変更した際の現象
原因はウインドウサイズを小さい状態で、「slider.js」が画像を連続させていたので、大きくすると画像幅が足りなくなってしまうという単純なものです。
回避策：ウインドウのリサイズ操作が終わった時にリロード
そこで、大きいウインドウサイズにした際に、画面をリロードすれば「slider.js」がウインドウサイズを再認識し、画像をフルに並べてくれると考えました。
本当は画面サイズを大きくしたときだけの処理なので、画面サイズをリサイズ前後で判定して処理してもいいのですが、今回はシンプルに大小を問わずウィンドウリサイズした際に処理することにしました。
タイマー処理を使ってリサイズイベントの間引きを行っています。
$(function(){
var timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
//リロードする
location.reload();
}, 200);
});
});
これで、「slider.js」の問題は解消します。
しかし、スマホの場合はリサイズイベントの発生が特殊なので、スマホを判定してリロードを抑止します。
スマホのウインドウリサイズイベントの対応
テストしてみると、スマホの場合もウインドウリサイズイベントが発生します。
スマホのブラウザーは見た目上、画面いっぱいに表示されています。
そのため、縦にしたり、横にしたりしなければ、ウインドウのリサイズは起こらないように見えます。
しかし、実際には画面を一番下までスクロールした際に、ウインドウリサイズイベントが発生します。
このため、ウインドウリサイズでリロードしてしまうと、スマホのスクロール時にリロードが発生してしまいます。
処理性能としても好ましいことではありません。
そこで、スマホの場合はユーザーエージェントを判定し、リロード処理を抑制することにしました。
また、タブレットもスマホの処理に準ずることにします。
JavaScriptによるユーザーエージェントの判定でスマホのリロード処理を抑止する
ウインドウがリサイズされた場合にリロードを行うロジックでしたので、スマホとタブレットの場合は後処理を抑止する判定を行えば、問題はクリアされます。
そこで、ユーザーエージェントを判定しPC、スマホ、タブレットの切り分けを行うことにしました。
JavaScriptによるユーザーエージェントの判定は以下のページを参考にさせて頂きました。
参照 JavaScriptユーザエージェント判別・判定（w3g.jp）
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());</pre>
<h3>jQuery</h3>
<pre class="lang:default decode:true " title="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);
});
}
});
まとめ
根本的な問題は「slider.js」がレスポンシブ・デザインに対応していないことです。
本来はレスポンシブ対応のカルーセルを使うべきでしょう。
jQueryを使っていない「Swiper.js」がおすすめです。
参照 Swiper the Most Modern Mobile Touch Slider（swiperjs.com）
「Swiper.js」については別の機会に紹介したいと思います。
では、また。
by T.Y.
