diff --git a/vike-solid/+config.ts b/vike-solid/+config.ts index 1486279..c413845 100644 --- 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 index 94a92f8..134512c 100644 --- a/vike-solid/renderer/onRenderHtml.tsx +++ b/vike-solid/renderer/onRenderHtml.tsx @@ -28,6 +28,8 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType`; + const viewportTag = dangerouslySkipEscape(getViewportTag(pageContext.config.viewport)); + const Head = pageContext.config.Head || (() => <>); const head = renderToString(() => ( @@ -57,6 +59,7 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType ${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 ''; + } + if (typeof viewport === "number") { + return ``; + } + return ""; +} + // We don't need this anymore starting from vike@0.4.173 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 index 4b76a24..03b8c53 100644 --- 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. *