浏览器窗口里那块能看见内容的区域矩形区域，由CSS的显示性viewport相关属性指定。具体说，网定是页由@viewport规则或HTML的<meta name="viewport">标签。前者在CSS里写，什属后者在HTML头部写。区域现在主流做法是显示性后者，因为移动端浏览器对它的网定支持更干脆。

我头一回被这个问题绊住，页由是什属做一个响应式页面。桌面浏览器拉窄到400px，区域布局正常。显示性换到手机上一看，网定字小得要用放大镜。页由原因就在<meta name="viewport" content="width=device-width,什属 initial-scale=1">这行没写。手机浏览器默认把页面塞进一个980px宽的虚拟视口里，再整体缩小。你看到的“小字”，是它缩出来的。

这个content里能塞好几个键值对。width管视口宽度，device-width就是跟设备逻辑像素宽度对齐。initial-scale管初始缩放，1就是不缩放。maximum-scale和user-scalable管用户能不能自己捏合缩放——现在很多站点把user-scalable=no去掉，因为无障碍规范不建议禁掉缩放。

CSS那边还有@viewport，写法像这样：

@viewport {  width: device-width; zoom: 1; }

但说实话，我在项目里几乎没见过谁用它。Chrome从61版开始就不支持了，Edge跟着Chromium走也不支持。剩下Opera和部分旧IE实现过。所以讨论“区域显示由什么属性指定”，实际答案就是那个meta标签。CSS的@viewport属于历史遗留，知道有这回事就行。

有个细节容易搞混：width=device-width里的device-width，指的是CSS像素宽度，不是物理像素。iPhone 15 Pro Max物理分辨率2796×1290，但device-width报出来是430。这中间隔着devicePixelRatio。你要是拿物理像素去算布局，肯定翻车。

另外，桌面浏览器对<meta name="viewport">基本无视。你在Chrome桌面版写width=500，它不会把视口缩到500px。桌面窗口大小由用户拖拽决定，meta标签管不着。只有移动端浏览器和部分模拟器会认真解析它。所以调试响应式时，别只靠桌面拉窗口，得开DevTools的设备模拟。

我见过一个坑：页面里同时写了@viewport和meta标签。移动端浏览器优先认meta，CSS里那条被忽略。但如果meta里没写width，只写了initial-scale，某些安卓浏览器会自己推断一个宽度，结果各机型表现不一致。稳妥做法永远是写全：width=device-width, initial-scale=1。

还有viewport-fit，管的是刘海屏安全区域。cover让页面铺满整个屏幕，contain留出黑边。配合CSS的env(safe-area-inset-*)用。这属于视口属性的延伸，不算核心，但做全屏应用绕不开。

总结一下我自己的判断：区域显示的指定权，在移动端归<meta name="viewport">，桌面端归浏览器窗口本身。CSS的@viewport已死。写页面时把那行meta放在<head>最前面，别等CSS加载完再补。否则移动端会先按默认980px渲染一帧，再跳变，用户能看到闪动。