SPデザインのみのLPでデバイス毎にviewportを設定する

はじめに

SP デザインのみの LP で PC 版のデザインは存在しない LP 作成が最近続いていたので、meta タグの設定を行う記述を紹介します。

完成物

https://sample-lp-weld.vercel.app/

以下コードを head タグ内に設置します。

function addMeta() {
  var _UA = navigator.userAgent;
  var meta = document.createElement("meta");
  meta.name = "viewport";
  if (
    _UA.indexOf("iPhone") > 0 ||
    _UA.indexOf("iPod") > 0 ||
    _UA.indexOf("Android") > 0
  ) {
    meta.content = "width=750";
  } else {
    meta.content = "width=device-width";
  }
  document.head.appendChild(meta);
}
addMeta();

userAgent を取得してデバイス毎に viewport の設定を変更します。
750は PC で表示するコンテンツ幅に設定します。