JavaScript

レスポンシブWEBデザインの画面制御スクリプト

更新日:

レスポンシブWEBデザインを採用するときは変化する画面にどう対応させるか、制御が大変です。
はじめてレスポンシブWEBデザインを採用した際には、様々なデバイスでイベントの発生の仕方が違うことに驚きました。

スクロールするだけでリサイズイベントが起きてしまうスマホや、縦横変化してもオリエンテーションチェンジが起きないタブレット等、まったくロジカルではありません。
しかも、レスポンシブWEBデザインはデバイスの制御ではなく画面の幅で基本的には制御するので、かなりアバウトなロジックになります。

このページでは当社で採用しているJavaScriptによる画面制御を紹介しておきます。
参考になれば幸いです。

スポンサーリンク

レスポンシブ画面制御スクリプト

実際に問題無く動いているスクリプトを編集して以下に掲載しました。
(編集時に間違っていないことを祈ります。)

 

ブレイクポイントを768ピクセルに設定しています。

ネットをサーチするとこの手の制御部分はかなりたくさんアップされています。
しかし、やってみると上手くいかなかったりして困ります。

スマホ、タブレットはiOSとAndroidでかなり違った動きをしますし、PCにも対応しなければならないので、resizeやorientationchangeのイベントを信じることが出来ません。
そのため、resizeやorientationchangeのイベントは同じように扱います。

常に発生する恐れのあるresizeイベントはタイマー処理で間引きます。
あとはorientationchangeイベントについては処理前と処理後の画面の幅を判定したり、画面の幅と高さを判定したりして縦になったのか横になったのかを判断していくわけです。

かなりバカバカしいとも思えるロジックです。
ただし、画面幅によってデザインが変わることが前提なので仕方ないですね。

レスポンシブWEBデザインから早く脱却できることを祈っています。

by T.Y.

-JavaScript

Copyright© Slashd inc. BLOG , 2019 All Rights Reserved.