用于响应式设计的屏幕与视口属性
了解 screen、viewport 和 devicePixelRatio 如何支持响应式布局、测试与隐私友好的产品决策。
响应式设计应根据页面可用空间调整，而不是猜测使用者是谁。视口是文档进行布局的区域；屏幕属性描述页面之外的显示环境。devicePixelRatio 表示 CSS 像素与物理像素的关系，并可能随缩放或显示设置改变。这些值可以帮助应用选择易读的布局，但不能可靠地证明设备身份。
视口和显示屏回答不同问题
window.innerWidth 与 window.innerHeight 表示 CSS 像素中的布局视口。CSSOM View 规范也定义了屏幕对象和窗口几何信息，但页面应按用途使用每个值。布局决定通常属于 CSS 媒体查询和视口；屏幕值则可能描述被浏览器界面或其他窗口部分遮挡的更大显示区域。
页面缩放或屏幕键盘出现时，视觉视口可能不同于布局视口。应把这种变化视为正常布局事件。不要假定大屏幕就等于宽的可用视口，也不要假定相同视口来自相同显示器。
有关显示配置可参阅屏幕和窗口指南以及设备像素比策略。那些文章说明浏览器配置边界；本文聚焦面向用户的布局。
用属性构建稳健布局
先让内容和控件在窄视口中可用，再在空间允许时增加分栏、更大的媒体或更密集的导航。CSS 容器查询和媒体查询可以表达这些选择，无需列出设备型号。弹性网格、固有尺寸、响应式图片和可换行文本通常比固定坐标更耐用。
JavaScript 可以用 ResizeObserver 或媒体查询匹配来处理明确的应用需求，例如调整图表或重新放置对话框。让响应紧扣可见结果。需要 640 像素内容区域的布局不需要保存用户的完整屏幕尺寸。设备模拟指南可帮助测试代表性的视口尺寸，但不应把这些尺寸变成身份声明。
如果值不可用、延迟到达或在缩放后改变，应保留核心任务。菜单可以变成按钮，表格可以滚动，图片可以选择更小的来源。不要因为首选测量不可用就留下空白区域或阻止阅读。
处理缩放和方向变化
MDN 说明 devicePixelRatio 可能因页面缩放或显示配置而改变，它不是永久的设备标签。用户仍在同一台电脑上时，浏览器缩放也会改变 CSS 像素和物理像素的关系。布局应使用 CSS 像素，并测试产品承诺支持的缩放级别。
方向变化会调整视口，也可能独立改变视觉视口。应让标题、控件和媒体重新排布，不要假定竖屏和横屏有固定尺寸。布局移动时保留焦点和表单状态，也不要让方向专属手势成为完成操作的唯一方式。
如果截图或视觉回归测试使用缩放因子，应将它与视口和浏览器版本一起记录。缩放不同可能改变位图尺寸，却不改变预期的 CSS 布局。比较面向用户的结果，并为有意测试不同显示设置的场景保留独立基线。
测试无障碍结果，而非设备类别
测试矩阵应包含视口宽度、缩放级别、方向变化、键盘输入和减少动画偏好。每次都检查文字可读、焦点可见、点击目标可用、对比度足够以及顺序仍然易懂。除占位文本外还要使用真实长度；本地化和用户文本会暴露固定样例掩盖的换行问题。
尽量把核心操作放在语义 HTML 中。画布或视觉增强可以适应视口，但导航、状态、标签和恢复控件仍应可被辅助技术访问。如果空间太小而无法采用首选呈现，应提供等价列表、表格或简化控件，而不是只显示屏幕尺寸不足的说明。
屏幕和视口值若被广泛收集，可能成为浏览器指纹的一部分，但响应式布局不需要这种收集。只请求当前呈现所需的测量；不需要持久化时保留在内存中，并说明任何存储或传输。不要根据特定宽度、比例或方向给人或设备分类。
根据内容需要选择断点
CSSOM View 区分了常被混用的几何概念。布局视口是文档布局的坐标空间，视觉视口是用户当前看见的区域。浏览器界面、窗口管理、缩放和系统缩放都会改变它们之间的关系，屏幕对象不是物理设备的完整描述。
服务器可以先渲染保守的初始状态，客户端再确认实际布局条件。重新协调时应保留输入、焦点和导航状态。粗粒度提示可以改善启动速度，但不应变成保存的个人配置或覆盖后续视口变化的假设。
MDN 说明 devicePixelRatio 表示物理像素与 CSS 像素的比例，并可能随页面缩放改变。因此组件和测试不能把一个比例当作浏览器的永久属性。缩放或显示变化后重新计算当前视图即可。
响应式图片和分辨率查询可能在不同缩放下选择不同资源，但含义、标签和交互必须保持一致。高密度图片不证明设备型号，低密度图片也不是删除重要控件的理由。
W3C 的响应式设计建议使用弹性布局、媒体查询和可适应不同视口的内容。这些技术也有利于隐私最小化，因为决定可以留在 CSS 或短暂的客户端匹配中，无需保存原始尺寸历史。
如果测量值发送到服务端，就必须说明传输目的、保留时间、访问者以及不传输时功能是否可用。可选传输应取得明确选择，不要把屏幕值藏在无关的分析事件里。
无障碍测试还应包含浏览器缩放和文字放大，而不只是缩小窗口。文字放大可能让标签和表格换行；应确认焦点可见、控件可达，且信息不依赖固定像素高度。
方向是状态转换，而不是设备类别。旋转可能同时改变宽度、键盘状态和视觉视口。保留有意义的滚动位置，并通过正常的无障碍状态模式告知重要变化。
嵌入文档和组件也应采用同一原则。若设计取决于局部空间，组件应响应容器，而不是读取全局屏幕值；这能适应分屏、侧栏、iframe 和可调整大小的外壳。
视觉回归截图只说明选定的测试配置，不说明用户身份。应将视口、缩放、方向、浏览器版本和相关偏好记录在基线旁；输入有意变化时建立有理由的新基线。
功能改变时重新检查属性清单，删除不再驱动用户决策的值，并为保留的值写下简短用途。这样既限制意外收集，也让响应式行为更容易调试。
处理安全区域和临时界面
安全区域、键盘和浏览器工具栏都可能暂时缩小可见区域。把它们视为渲染约束，保留语义控件和恢复路径，不要把这些变化记录成硬件类别。
明确测量与隐私决定
读取属性前先写明它支持的用户决策。布局需要的短暂计算与保存完整屏幕资料是不同的数据实践，应分别审查。
编写可执行的测试矩阵
矩阵应记录内容状态、视口范围、缩放、方向、输入方式和预期无障碍结果。用用户能够完成的任务描述通过条件，而不是只记录尺寸。
总结
用布局视口决定内容如何适配，在有明确理由时才使用屏幕环境，并把设备像素比视为可变化的值。通过内容驱动的断点、语义控件和隐私最小化保持体验稳定。
视口几何应被理解为当前呈现条件，而不是物理设备目录。浏览器界面、窗口管理和系统缩放都会改变这些条件。
服务器端可以先给出保守布局，客户端确认后平滑更新。更新不能丢失输入、焦点或导航状态。
设备像素比随缩放变化，所以依赖比例的绘制应在变化后重新计算，而不能长期缓存一个值。
不同密度的图片应保持同一含义和控件。资源选择不应改变标签或删除重要操作。
弹性布局和媒体查询既减少断点数量，也减少发送屏幕尺寸的需要。
传输测量值前应说明用途、保存期限、访问范围和不传输时的行为。
文字放大测试应确认焦点、按钮和表格仍然可用，而不只是检查窗口宽度。
方向变化应保留有意义的滚动位置，并用可访问状态告知重要变化。
组件若依赖局部空间，应响应容器，以便在分屏和 iframe 中复用。
视觉回归基线记录测试配置，不代表执行测试的人的身份。
功能变更后删除不再驱动用户决策的属性，并为保留项记录用途。
这些做法让布局在新浏览器和新窗口尺寸下保持可解释。