画面幅375pxを下回る環境で観覧した際はviewportをwidth=375に書き換えるスクリプトを試す 📱

最強のviewportを探っていた際、昨今のviewportは環境によって出し分けられていることを知り、フロントでviewportを書き換えるスクリプトを書いてみました。

blog.kimizuka.org

本当はサーバで書き換えたものを返した方が良いことは百も承知なのですが、静的なウェブサイトでviewportを動的に書き換えたかったらJavaScriptの力に頼らざる得ません。
スクリプトの内容は、画面幅が375pxを下回った際に、viewportのwidthを375と固定値に指定しまうスクリプトです。

一昔前であれば、横幅320px（Retina対応で640px）でデザインデータを頂くことが多かったのですが、最近は横幅375px（Retina対応で750px）のデザインデータが多く、320pxの端末では横幅に併せて縮小して欲しいというリクエストに応えるべくつくってみました。

横幅をwindow.innerWidthでみるべきか、window.screen.widthでみるべきかは迷ってます。
が。一旦こんな感じです。

TypeScript

export default class ViewPort {
  static set() {
    window.removeEventListener('resize', this.handleResize);
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  }

  static handleResize() {
    const width = window!.screen!.width || window.innerWidth;
    const viewport = document.querySelector('[name="viewport"]');

    if (viewport) {
      const content = viewport.getAttribute('content');

      if (width < 375) {
        const viewport375 = 'width=375, initial-scale=1, shrink-to-fit=no, viewport-fit=cover'

        if (content !== viewport375) {
          viewport.setAttribute('content', viewport375);
        }
      } else {
        const viewportNormal = 'width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover';
        if (content !== viewportNormal) {
          viewport.setAttribute('content', viewportNormal);
        }
      }
    }
  }
}