Webサイトがスマホ・タブレットの横向きで見ると見づらい（崩れる）問題

Webサイトがスマホ・タブレットの横向きで見ると見づらい（崩れる）問題:

おはようございます、こんにちは、こんばんわ。

今回はスマホ・タブレットの横向き対応について書きます。

みなさんの今後のweb制作における、選択肢一つになればと思います。

スマホ・タブレットの横向き問題

最新のスマホ・タブレットの横向きにするとPCのレイアウトが表示されたり、めちゃくちゃ見づらかったり...

PCのみで全画面スクロールジャックしていたり、画像が一画面に入りきっていなかったりなどありませんか？

様々な諸事情で「なんでスマホの画面は回転しやがるんだ！！」と怒る人や「お願いですから横にタブレットを横向きにしないでください！」と懇願する人もいるでしょう？

ここは一つ勇気を持って提案してみませんか。

横向き禁止令

横向き禁止令と物騒な匂いがしますが、単純にスマホ。タブレットを横向きにした時に「縦向きにしてください」伝える画像を画面全体に表示するだけです。

特別な仕様でなければ大体横向きにしても崩れることは少ないでしょう。

ですが、これ以上時間をかけられない時やどうしても仕様上崩れてしまう時などの解決策候補として提案してみましょう。

具体的な例として
https://www.sonicjam.co.jp/

ソニックジャム様
https://www.crowdgate.co.jp/

CrowdGate様

などがありました。

発令方法

orientationchange¹イベントを使用してデバイスの向きによって画像を表示させるだけです。

具体的なコードはこちら

サンプル

window.addEventListener('orientationchange',function(){ 
      if (window.orientation == 0) { 
        document.querySelector('.hoge').classList.remove('is-show'); //横向きの場合の処理 
      } else { 
        document.querySelector('.hoge').classList.add('is-show'); //縦向きの場合の処理 
      } 
    },false); 

window.orientationは縦向きの時に0を返してくれます。

あとは.is-showが付与されたら表示するようにcssを記述するだけです。

jqueryを使用する際は直接show() hide()で制御した方が楽だと思います。

まとめ

具体例のwebサイトを探している時に沢山横向きでwebサイトを見ましたが、画像やコンテンツが大きすぎたりして見づらいwebサイトが大半でした。

これ以上時間をかけられない時などの解決策候補と書きましたが、見づらいままにするくらいなら今回の記事のような対応をしておくのも良いかもしれないと思いました。

---

1. 
   http://urx2.nu/O7cA ↩