Viewportとメディアクエリ

 iPhone6plusとか出ちゃって、PC、タブレット、スマートフォンでのレスポンシブデザインのメディアクエリ分けをどうするかで散々悩んだ挙句、ようやく収束しつつあるのでメモ。

 まずviewportから、

 コレ一択。拡大させたくない場合は user-scalable=no を加えればいいが、ボクみたいな老眼の人には迷惑この上ないのでできれば避けたい。
 width=640 とかやってた時期もあって、iPhoneはそれで良かったのだけど、iPadはphpレベルで width=980 とか対応しなくてはいけなかったり、古いAndroidが壊滅状態だったので2度と使わないことにした。

 メディアクエリは、PC/タブレット/スマートフォン対応のレスポンシブが、

 スマートフォンやタブレットを横にした時に無駄に大きくなるのが非常に不愉快だったので試行錯誤の結果こうすることにした。
 動作としては次のようになる

iPhone3/4(320×480) → 縦でPhone, 横もPhone
iPhone5(320×568)/6(375×667)/6plus(414×736) → 縦でPhone, 横でTablet
iPad/iPad mini(768×1024) → 縦でTablet, 横でPC
iPad PRO(1024×1366) → 縦でPC、横もPC

 max-width になってるのは、PCでも確認できるようにするためで、完全にPCと分けたい場合は max-device-width にする。

 タブレットのmax-widthが999pxになっているところは、横幅1000pxでPCサイトを構築するのが一般的になりつつあるのでこの数値に。ヘッダーやフッターの幅によって変更するのもアリだが、必ず768px以上にすること。
 Androidも基本コレでいける。ただ、モノによってはdevice-widthがとんでもない数字になってるタブレットとかもあったりするけど、それはボクのせいじゃないので無視することにした。そういうの使ってる人はほかのサイトでもおかしくなってるだろうし。

 このメディアクエリで面倒なのは、phpやJavaScriptで、表示する画像やサイズ指定を変えていたり、表示/非表示を切り替えてる場合など、CSSでは切り替えできない要素。これはresizeイベントできちんと対応する必要があるのでがんばるしかなさ気。
 例として一番あるのがヘッダーの切り替え。PCの場合はメニューをずらっと並べ、タブレットやスマートフォンだとメニューアイコンにしてクリックでメニューが出るタイプなんかは、スマートフォンやタブレットを横から縦にした時にメニューが消えたままになったりするので注意する。PCでのレスポンシブ表示も同様。

ちなみに、タブレットでPCページを表示したい場合は、

とする。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">