レスポンシブWEBデザインを採用するときは変化する画面にどう対応させるか、制御が大変です。
はじめてレスポンシブWEBデザインを採用した際には、様々なデバイスでイベントの発生の仕方が違うことに驚きました。
スクロールするだけでリサイズイベントが起きてしまうスマホや、縦横変化してもオリエンテーションチェンジが起きないタブレット等、まったくロジカルではありません。
しかも、レスポンシブWEBデザインはデバイスの制御ではなく画面の幅で基本的には制御するので、かなりアバウトなロジックになります。
このページでは当社で採用しているJavaScriptによる画面制御を紹介しておきます。
参考になれば幸いです。
レスポンシブ画面制御スクリプト
実際に問題無く動いているスクリプトを編集して以下に掲載しました。
（編集時に間違っていないことを祈ります。）
<script type="text/javascript">
//レスポンシブ画面制御
$(function(){
var w = $(window).width();
var w_resize;
var timer = false;
//幅変更の判定
var windowWidth = $(window).width();
//初期処理
Load ();
//画面リサイズと回転を処理する
$(window).on("orientationchange resize",function(){
//画面の横幅を取得
var ww = $(window).width();
if (timer !== false) {
clearTimeout(timer);
}
//リサイズイベントを間引く
timer = setTimeout(function() {
//レスポンシブ処理
Responsive();
//画面の横幅が変わったかどうかを判定する
if(windowWidth != ww) {
windowWidth = ww;
//画面幅が変わったときだけ処理する場合はこちら
}
}, 200);
});
function Load () {
var ww = window.innerWidth || document.documentElement.clientWidth || 0;
var wh = window.innerHeight || document.documentElement.clientHeight || 0;
if(ww < 768) {
if(ww > wh){
//スマホの横向きの場合の初期処理
} else {
//スマホの縦向きの場合の初期処理
}
} else {
if(ww > wh){
//タブレット、PCの横向きの場合の初期処理
} else {
//タブレット、PCの縦向きの場合の初期処理
}
}
}
function Responsive () {
var ww = window.innerWidth || document.documentElement.clientWidth || 0;
var wh = window.innerHeight || document.documentElement.clientHeight || 0;
if(ww < 768) {
if(ww > wh){
//画面操作でスマホが横向きになった場合の処理
} else {
//画面操作でスマホが縦向きになった場合の処理
}
} else {
if(ww > wh){
//画面操作でタブレット、PC横向きになった場合の処理
} else {
//画面操作でタブレット、PC縦向きになった場合の処理
}
}
}
});
</script>
ブレイクポイントを768ピクセルに設定しています。
ネットをサーチするとこの手の制御部分はかなりたくさんアップされています。
しかし、やってみると上手くいかなかったりして困ります。
スマホ、タブレットはiOSとAndroidでかなり違った動きをしますし、PCにも対応しなければならないので、resizeやorientationchangeのイベントを信じることが出来ません。
そのため、resizeやorientationchangeのイベントは同じように扱います。
常に発生する恐れのあるresizeイベントはタイマー処理で間引きます。
あとはorientationchangeイベントについては処理前と処理後の画面の幅を判定したり、画面の幅と高さを判定したりして縦になったのか横になったのかを判断していくわけです。
かなりバカバカしいとも思えるロジックです。
ただし、画面幅によってデザインが変わることが前提なので仕方ないですね。
レスポンシブWEBデザインから早く脱却できることを祈っています。
by T.Y.
