【JavaScript】特定のpx幅以下のスマートフォンのviewport画面幅を固定する方法【レスポンシブ対応】

SIM

レスポンシブで幅の狭いスマートフォンでも表示が破綻しない方法を紹介します。

たとえば、レスポンシブ対応で375px幅まではキレイに表示されるが、それより狭い幅のスマホでレイアウトや改行位置が破綻してお困りの方もいると思います。

この記事では、幅の狭いスマートフォンでも表示が破綻しない方法を紹介します。

方法の概要

この「特定のpx幅より狭いスマートフォンのviewport画面幅を固定する方法」の概要は下記のとおりです。

実際の見え方は下の図のとおりで、375px以下の表示幅でも全体的に縮小されて表示されるため、改行位置も要素の縦横比も375px幅のものと変わりません。全体的に小さく見えるだけです。

特定のpx幅より狭いスマートフォンのviewport画面幅を固定する方法

SIM

それでは実際のコードを紹介していきます。

具体的な方法は非常に簡単で、下記のHTMLとJavaScriptをコピペすれば実装できます。

HTML

HTMLまたはWordPressのheadタグ内に以下のmetaタグをコピペして下さい。

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

JavaScript

JavaScriptファイルに以下のコードをコピペして下さい。

// レスポンシブの375px未満のviewport画面幅を固定
!(function () {
  const viewport = document.querySelector('meta[name="viewport"]');
  function switchViewport() {
    const value =
      window.outerWidth > 375
        ? 'width=device-width,initial-scale=1'
        : 'width=375';
    if (viewport.getAttribute('content') !== value) {
      viewport.setAttribute('content', value);
    }
  }
  addEventListener('resize', switchViewport, false);
  switchViewport();
})();

コードの6行目と8行目に375と表示幅が書かれていますが、この数字をご希望のコンテンツ幅に変更して下さい。例えば、360に変更すれば、360px以下でviewport画面幅を固定されます。

さいごに

以上、簡単ですが、特定の幅より狭いviewport画面幅を固定する方法を紹介しました。