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

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

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

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

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

その書き方が、こちら。

この方法はviewportというより表示されているものを縮小して表示させる方法のため、$(window).height();など、高さを取得するときにうまくいかないことがあります。その場合は、素直にjQueryを使ってviewportを出し分けましょう。jQueryを使った方法は、最下部に追記しました。







実装

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

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

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

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

こんな感じ

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

jQueryを使ってviewportを出しわける場合

ユーザーエージェントを判別し、iPadの場合はviewportを固定幅にする方法。

上記方法が使えないときはこっち

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

シェアしてくだちい

フォローしてくだちい