レスポンシブだけど、iPad（タブレット）ではPCの縮小表示にしたい。
最近、けっこうそれがスタンダードになってきている気がします。
僕は基本WordPressなので、phpでviewportを場合分けしていたんですが、稀にphpが使えない場合はjavascriptを使っていました。
ところがこのjavascriptでの場合分け、あんま意味ないことに気づきました。
まず、ちゃんと読んでくれない場合があります。読み込みのタイミングの問題ですかね。
あと、一瞬大きく表示されるとか、最初から拡大表示になっちゃってて、ピンチアウトしないとちゃんと見れないとかね…
ではどうするかというと、javascriptも使わない、というか、場合分けすら使わないめっちゃシンプルな書き方がありました。
その書き方が、こちら。
実装
まず、<head>内のviewportをこう書きます。
|
1 |
<meta name="viewport" content="width=device-width"> |
おそらくいつもスマホ向けに書いているであろう以下の記述
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
から、”initial-scale”を消しただけ。
あとは、cssでbodyにmin-widthを指定し、スマホ用のブレイクポイントで、min-widthを解除します。
こんな感じ
|
1 2 3 4 5 6 7 8 |
body { min-width: 1040px; } @media screen and (max-width: 750px){ body { min-width: initial; } } |
これでうまいこと、iPadではPC表示（最初からちゃんと見れる）、スマホではスマホ向けのスタイルが適応されます。
昔からこうだっけ？
対応ブラウザとかの変化で、いつの間にか使いやすくなったのかもしれませんね。
どちらにしろ、これで今後は迷うことがなさそう。
というか、initial-scale=1.0ってそもそも書かなくていいし、最初からこれ書いておけば万事解決ですよね。
ではでは、圧倒的シンプルなコーディングライフを！
京都在住のフリーランス。Web制作で生きてます。今まで100件以上のWebサイト制作に携わってます。好きなロボットはキングジョーです。
Twitter
@zeroichi69
