feat: new setting viewport

BREAKING CHANGE: The responsive viewport tag is now injected by default (`<meta name="viewport" content="width=device-width,initial-scale=1">`). If you already inject `<meta name="viewport">` then remove it or set the `viewport` setting to `null`, see https://vike.dev/viewport.
vikejs · Aug 2, 2024 · bb60ac2 · bb60ac2
1 parent 1f91f16
commit bb60ac2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/vike-solid/+config.ts b/vike-solid/+config.ts
@@ -39,6 +39,9 @@ export default {
     image: {
       env: { server: true },
     },
+    viewport: {
+      env: { server: true },
+    },
     favicon: {
       env: { server: true },
       global: true,

diff --git a/vike-solid/renderer/onRenderHtml.tsx b/vike-solid/renderer/onRenderHtml.tsx
@@ -28,6 +28,8 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
     ? ""
     : escapeInject`<meta property="og:image" content="${image}"><meta name="twitter:card" content="summary_large_image">`;
 
+  const viewportTag = dangerouslySkipEscape(getViewportTag(pageContext.config.viewport));
+
   const Head = pageContext.config.Head || (() => <></>);
   const head = renderToString(() => (
     <PageContextProvider pageContext={pageContext}>
@@ -57,6 +59,7 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
       <head>
         <meta charset="UTF-8" />
         ${titleTag}
+        ${viewportTag}
         ${headHtml}
         ${faviconTag}
         ${descriptionTags}
@@ -91,6 +94,19 @@ function mergeTagAttributesList(tagAttributesList: TagAttributes[] = []) {
   return tagAttributes;
 }
 
+export type Viewport = "responsive" | number | null;
+function getViewportTag(viewport: Viewport | undefined): string {
+  if (viewport === "responsive" || viewport === undefined) {
+    // `user-scalable=no` isn't recommended anymore:
+    //   - https://stackoverflow.com/questions/22354435/to-user-scalable-no-or-not-to-user-scalable-no/22544312#comment120949420_22544312
+    return '<meta name="viewport" content="width=device-width,initial-scale=1">';
+  }
+  if (typeof viewport === "number") {
+    return `<meta name="viewport" content="width=${viewport}">`;
+  }
+  return "";
+}
+
 // We don't need this anymore starting from [email protected] which added the `require` setting.
 // TODO/eventually: remove this once <=0.4.172 versions become rare.
 function checkVikeVersion() {

diff --git a/vike-solid/types/Config.ts b/vike-solid/types/Config.ts
@@ -9,6 +9,7 @@ import type {
   PageContext as PageContext_,
 } from "vike/types";
 import type { TagAttributes } from "../utils/getTagAttributesString";
+import type { Viewport } from "../renderer/onRenderHtml";
 
 declare global {
   namespace Vike {
@@ -81,6 +82,15 @@ declare global {
        */
       image?: string | ((pageContext: PageContextServer) => string);
 
+      /**
+       * Set the page's width shown to the user on mobile/tablet devices.
+       *
+       * @default "responsive"
+       *
+       * https://vike.dev/viewport
+       */
+      viewport?: Viewport;
+
       /**
        * Set the page's favicon.
        *