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

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

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

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

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

その書き方が、こちら。

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

実装

まず、<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表示（最初からちゃんと見れる）、スマホではスマホ向けのスタイルが適応されます。

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

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

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

var ua = navigator.userAgent

var sp = ua.indexOf('iPhone') > -1 ||
  (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1)

var tab = !sp && (
  ua.indexOf('iPad') > -1 ||
  (ua.indexOf('Macintosh') > -1 && 'ontouchend' in document) ||
  ua.indexOf('Android') > -1
)

if (tab) {
  $('meta[name="viewport"]').attr('content','width=1040')
}