用静态导出控制视口

静态导出的本质

视口配置在 Next.js 中被设计为静态导出。这意味着视口参数必须在构建时就确定，而不能根据用户请求动态改变。

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
};

这个约束并非偶然。视口元数据影响浏览器如何渲染页面的基础框架，它需要在页面加载的最早期就生效。动态计算会导致渲染延迟，破坏用户体验。

静态导出强制开发者提前做决策：你的页面需要什么样的视口约束？这个问题必须在写代码时就回答，而不是在运行时。

export const viewport = { ... }

export function viewport() {
  // 根据请求动态计算
  return { ... }
}

视口是浏览器的窗口

「视口」可以理解为浏览器渲染页面的可视区域。但更准确的说法是：视口定义了网页内容与设备屏幕之间的映射关系。

在移动设备出现之前，这个概念并不重要。桌面浏览器的视口就是窗口大小，简单直接。移动设备改变了一切：屏幕变小了，但网页还是为桌面设计的。

移动浏览器的解决方案是引入虚拟视口。默认情况下，浏览器假设页面需要 980px 的宽度来正常显示，然后缩小整个页面塞进 375px 的手机屏幕。这就是为什么没有做响应式优化的桌面网站在手机上看起来字很小但布局完整。

width: 'device-width' 告诉浏览器：不要做这种假设。视口宽度就等于设备屏幕宽度。这是响应式设计的前提。

缩放级别的含义

initialScale: 1 定义了页面首次加载时的缩放倍数。1 表示 CSS 像素与设备独立像素 1:1 对应。

CSS 像素是你在样式表中写的 16px，设备独立像素是操作系统定义的抽象像素。在普通屏幕上，1 CSS 像素等于 1 物理像素。在 Retina 屏幕上，1 CSS 像素可能对应 2x2 或 3x3 个物理像素。

initialScale: 2 意味着页面会放大显示，1 CSS 像素占用 2 个设备独立像素的空间。这不是通过浏览器缩放实现的，而是渲染引擎计算布局时的基础参数。

用户通过手势或快捷键放大页面，改变的就是这个缩放级别。maximumScale: 1 阻止用户放大页面，因为最大缩放级别被限制为 1。

能力边界

视口配置只能影响浏览器的初始渲染行为，无法完全控制用户的缩放能力。

用户可以通过浏览器设置强制启用缩放，绕过网页的 maximumScale 限制。iOS Safari 和 Chrome 都提供了「忽略网站缩放设置」的选项。这是浏览器厂商有意为之，保护用户的控制权。

视口配置的真正作用是建议浏览器如何渲染页面，而不是强制约束。它定义了开发者认为最优的初始状态，但最终控制权在用户手中。

这种设计反映了 Web 平台的核心理念：内容优先，用户自主。开发者提供最佳体验，但不能剥夺用户根据自身需求调整的权利。

决策点

视口配置是页面生命周期的第一个决策点。它不关心内容是什么，只关心内容如何被看到。

选择 width: 'device-width' 和 initialScale: 1 是在说：我信任响应式设计，相信同一套 HTML 和 CSS 可以适应不同屏幕。

选择 maximumScale: 1 是在说：我认为放大会破坏体验，愿意为特定交互牺牲可访问性。

这些选择没有对错，只有是否适合你的产品定位。工具类应用可能需要固定视口，内容类网站应该允许自由缩放。

静态导出强制你在写代码时就做这个决策。这是约束，也是明确性。

参考来源