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

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

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

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

スポンサーリンク

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

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

 

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

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

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

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

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

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

by T.Y.

スポンサーリンク

関連記事

  1. マルチデバイス対応HPをPCとスマートフォン2種類の固定デザインCSS…

  2. トップページ動画をランダムに表示させる

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

制作実績一覧

おすすめ記事

最近の記事

– このブログを書いてる人 –

 

 

山本 朝次/Yamamoto Tomotsugu

 

クリエイティブディレクター

 

はじめまして。よろしくおねがいします。

 

柴犬が大好きです。

 

プロフィールはFacebookで。

 

Facebook

 
 
 

PAGE TOP