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

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

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

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

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

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

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

その書き方が、こちら。

実装

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

<meta name="viewport" content="width=device-width">

1	<meta name="viewport" content="width=device-width">

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

こんな感じ

body {
  min-width: 1040px;
}
@media screen and (max-width: 750px){
  body {
    min-width: initial;
  }
}

body {

min-width: 1040px;

}

@media screen and (max-width: 750px){

body {

min-width: initial;

}

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

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

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

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

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

フリーランスのWeb屋。「ゆるく生きる」がテーマ。カツカレーが好き。

Twitter→@zeroichi69
Twitterではブログの更新通知をしたり、しょうもないことをつぶやいたりしてます。