【JavaScript】iPadだけviewportを固定してPC表示にするやつ

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

僕は基本WordPress使いなので、phpでviewportを場合分けしていたんですが、phpを使わない場合はJavaScriptでもできます。

実装

htmlのhead内は、スマホ向けにこうしておきましょう

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

JavaScriptでユーザーエージェントを判別し、iPadの場合だけmeta viewportを書き換えます。

const baseW = 1120; // viewportのwidth
const ua = navigator.userAgent

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

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

if (tab) {
  viewportContent = "width=" + baseW + "px,user-scalable=no";
  document.querySelector("meta[name='viewport']").setAttribute("content", viewportContent);
}

jQueryと違って早いので、ページ読み込み時に一瞬だけなんかおかしい！ということも軽減されます。iPad以外では動かないしね。

現場からは以上です。