最近個人用に作っていたWebアプリをスマホで見たらPCと同じように見えていた。
あれー？
レスポンシブデザインで作っているからウィンドウのサイズが小さくなると勝手にスタイルシートが切り替わるはずなのに。
調査してみたところ、うちのGalaxyS5はディスプレイサイズがでかいのが原因だった。
横幅767pxと768pxが切り替えの境目にしていたけど、Galaxyのディスプレイサイズは縦向きでも980pxあったのが原因。
閾値を修正したらちゃんとレスポンシブに切り替わった。
てかこれ、iPhone6Plusとかでも同じこと起きるんじゃないの？
適当にレスポンシブデザインのCSSとかを検索してみるとモバイルは480px、タブレットは768pxを境目にしているサイトがいくつかあって、自分も768pxを閾値に作ったのだけれども。
でも最近のでかいスマホだと普通に解像度それ以上あるのですよね。
だからアプリ開発者はちゃんと実際にスマホで見てみましょう。
もしかしたらGalaxyNoteとかiPhone6Plusとかのでかい端末じゃすべてPC用に表示されるんじゃないのかね？
ちなみにこのブログのレスポンシブ閾値はちゃんと980pxになっていた。だからちゃんとスマホで見るとスマホ用になっているのか。
レスポンシブデザインはブラウザのサイズを縮めるだけで検証できるからUAを偽装しなくても簡単に見れて便利なのだけれど、スマホ用に作ったのが実際スマホで見れないってことが起こるのですね。
となるとPHPやらjavascriptやらでUAを読み込んだほうが確実かもしれないですね。
しっかしスマホで見るとボタンが小さかったりするなあ。
デザインはやっぱり難しいです。