レスポンシブでiPadはPC表示にする際のviewportの超シンプルな書き方

レスポンシブだけど、iPad(タブレット)ではPCの縮小表示にしたい。

最近、けっこうそれがスタンダードになってきている気がします。

僕は基本WordPressなので、phpでviewportを場合分けしていたんですが、稀にphpが使えない場合はjavascriptを使っていました。

ところがこのjavascriptでの場合分け、あんま意味ないことに気づきました。

まず、ちゃんと読んでくれない場合があります。読み込みのタイミングの問題ですかね。
あと、一瞬大きく表示されるとか、最初から拡大表示になっちゃってて、ピンチアウトしないとちゃんと見れないとかね…

ではどうするかというと、javascriptも使わない、というか、場合分けすら使わないめっちゃシンプルな書き方がありました。

その書き方が、こちら。




実装

まず、<head>内のviewportをこう書きます。

おそらくいつもスマホ向けに書いているであろう以下の記述

から、”initial-scale”を消しただけ。

あとは、cssでbodyにmin-widthを指定し、スマホ用のブレイクポイントで、min-widthを解除します。

こんな感じ

これでうまいこと、iPadではPC表示(最初からちゃんと見れる)、スマホではスマホ向けのスタイルが適応されます。

昔からこうだっけ?
対応ブラウザとかの変化で、いつの間にか使いやすくなったのかもしれませんね。

どちらにしろ、これで今後は迷うことがなさそう。

というか、initial-scale=1.0ってそもそも書かなくていいし、最初からこれ書いておけば万事解決ですよね。

ではでは、圧倒的シンプルなコーディングライフを!

フォローする