# 有用户常年把浏览器开在 150%，侧栏和表格挤成一团，布局该按什么标准来测？

**URL:** <https://www.shiqidu.com/t/topic/1882>\
**Category:** 开发调优\
**Tags:** 前端开发, CSS, 浏览器\
**Created:** [2026 年11 月 1 日 08:51 UTC](https://www.shiqidu.com/t/topic/1882 "2026-11-01T08:51:57Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![shiqidu\_editor](https://www.shiqidu.com/user_avatar/www.shiqidu.com/shiqidu_editor/32/528_2.png) [@shiqidu\_editor](https://www.shiqidu.com/u/shiqidu_editor)\
发布日期： [2026 年11 月 1 日 08:51 UTC](https://www.shiqidu.com/t/topic/1882/1 "2026-11-01T08:51:57Z")

</div>

浏览器缩放在用户眼里是「字变大」，到了样式表那边，则是视口的 CSS 像素宽度变窄了。1280 宽的窗口开到 150%，按 1280 ÷ 1.5 算只剩 853 左右，再扣掉滚动条还要少一点。很多后台和文档站的断点刚好卡在这一段。结果桌面布局突然切成平板布局，或者固定宽度的侧栏把正文挤成一条窄缝，表格横着撑出屏幕。开发机上一直是 100%，这些情况平时很难看到。

## 两条可以拿来当基准的标准

WCAG 2.2 里跟缩放直接相关的是 1.4.4 和 1.4.10，W3C 的 Understanding 文档把测法写得很细。

1.4.4 调整文字大小：除了字幕和文字图片，文字不借助辅助技术放大到 200% 时，不能丢内容、丢功能。Understanding 文档还补了一句，缩放机制在 100% 到 200% 之间有中间档位的话，每一档都不能出问题。150% 正好在这个区间里。这一档要是有内容被挤没、被遮住，或者按钮点不到，就已经不符合 1.4.4 了，不用等到 200% 才去测。

1.4.10 回流：内容在宽度相当于 320 CSS 像素时，不需要横竖两个方向都滚动也能看全、能操作。文档的注释说，320 CSS 像素相当于 1280 宽的视口放大到 400%。窗口不一定是 1280，文档也举了别的情况：窗口停靠在半边屏、视口 960 CSS 像素时，放大到 300% 同样是 320。文档里还有个细节：1280×1024 的屏幕放大到 400%，浏览器要画竖向滚动条，实际视口只有 318 像素宽。所以测的时候差一两个像素很正常，别把 320 当成卡死的数字。

回流有例外：数据表格、地图、示意图、视频、需要常驻工具栏的界面，这些本身就需要二维布局，可以两个方向滚。可例外只管那一块。表格前面的标题、搜索框和后面的分页都不算例外，表格下面的段落也必须正常折行。

## 测的时候看哪些地方

- 断点用 em 还是 px 有区别。媒体查询里的 em 按浏览器初始字号算，不受页面样式影响。用户只调了默认字号、没动缩放时，em 断点会跟着变，px 断点不会。两种都试一下，看哪种更符合你们的预期。
- 固定侧栏要想好什么时候收起。Understanding 文档建议，视口变小以后把 sticky 或 fixed 的元素改成静态定位，或者让用户能手动收起来。不然这类元素会挡住正文，也可能挡住获得焦点的元素。
- 表格包一层自己的滚动容器，让横向滚动只出现在表格里，别让整页一起横滚。
- 代码块的缩进有含义，可以在块内横滚。普通段落、长 URL、长串 token 要能断行。
- 图片和视频加上 `max-width: 100%`。文档专门举过一个例子：视频没加这条，把整页撑出了横向滚动条。视频属于例外，这种情况仍算通过，可用户看到横向滚动条，会以为右边还有别的内容，白找一趟。

```css
.layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
}

@media (max-width: 60em) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    position: static;
  }
}

.table-wrap,
pre {
  overflow-x: auto;
}

img,
video {
  max-width: 100%;
  height: auto;
}

```

`minmax(0, 1fr)` 用来防止网格列被里面的长内容撑宽。不写的话，一行长代码就能把整列顶出去。

实际测的时候，在 1280 宽的窗口里把缩放依次调到 125%、150%、175%、200%，最后到 400%，每一档都看一眼：有没有横向滚动条，侧栏是不是压住了正文，按钮和输入框的文字有没有被截断。也可以直接用开发者工具把视口宽度设成 320 来测回流。

滚动条改细以后鼠标点不中，属于目标尺寸的问题，跟缩放和回流分开测更清楚。

你们的回归测试里有缩放这一项吗，一般测到多少倍？