viewport.js の実行タイミングを修正

assets/scripts/viewport.js

@@ -1,14 +1,12 @@
-const minWidth = 375
-const viewportEl = document.querySelector('meta[name="viewport"]')
-const mediaQueryList = window.matchMedia(`(min-device-width: ${minWidth}px)`)
-
-function handleChange() {
-  const viewportContent = mediaQueryList.matches
-    ? 'width=device-width, initial-scale=1'
-    : `width=${minWidth}`
-
-  viewportEl.setAttribute('content', viewportContent)
+const el = document.querySelector('meta[name="viewport"]')
+const mql = window.matchMedia('(min-device-width: 375px)')
+const handleChange = () => {
+  el.setAttribute(
+    'content',
+    mql.matches ? 'width=device-width, initial-scale=1' : 'width=375'
+  )
 }
 
-mediaQueryList.addListener(handleChange)
 handleChange()
+
+mql.addListener(handleChange)

templates/_includes/layouts/base.njk

@@ -15,7 +15,7 @@
     <meta property="og:site_name" content="{{ site.name }}">
     <meta name="twitter:card" content="summary_large_image">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport">
 
     {% include 'pages/common/gtm-head.njk' %}
 
@@ -26,9 +26,9 @@
     {% endblock %}
 
     {% block scripts %}
-    <script src="{{ '/assets/scripts/runtime.js' | url }}" defer></script>
-    <script src="{{ '/assets/scripts/vendors.js' | url }}" defer></script>
+    <script src="{{ '/assets/scripts/runtime.js' | url }}"></script>
     <script src="{{ '/assets/scripts/viewport.js' | url }}"></script>
+    <script src="{{ '/assets/scripts/vendors.js' | url }}" defer></script>
     <script src="{{ '/assets/scripts/pages/common.js' | url }}" defer></script>
     {% endblock %}
   </head>