辅助功能 页面缩放
为什么
视力较弱的人需要放大内容才能使用页面。
什么
页面缩放是文本缩放的“大哥”。放大所有内容！原则易于理解。
- 避免水平滚动。
- 所有内容都可用。
- 所有功能都可用。
- 避免图像中的文本。
- 为关键内容提供空间。
可用意味着没有任何内容被剪切、截断或遮挡。
页面缩放通常会在响应式网站上触发移动视图，这很好。
如何
您将学习五种支持页面缩放的技术。
为关键内容提供足够的空间
不要让辅助内容占据屏幕。
隐藏图标
在这个来自三星印度的示例中，页面被缩放了 400%。内容正在正确缩放。没有水平滚动条。但是，聊天按钮占据了浏览器窗口的大部分空间。难以访问搜索、购物车或菜单按钮。并且按钮图形的质量较低。此外，还有一个巨大的应用程序广告。
改进
- 为聊天按钮添加一个**最小化按钮**。将最小化版本用作默认版本。
- 使用**矢量图形**（如 SVG）代替光栅图形（如 PNG）。
- 仅对移动**设备**显示移动广告。
无杂乱
在这个来自飞利浦的示例中，整个视口都可用于主要内容。主导航已打开，并且没有杂乱。文本和图形缩放良好。
视口已设置
<meta name="viewport" content="width=device-width, initial-scale=1">
了解更多关于响应式网页设计的信息。
避免水平滚动
双向滚动令人困惑。
固定宽度
在这个来自戴尔的示例中，我们只能看到标题的一小部分。网站在缩放时不会缩放。结果是出现了一个大的水平滚动条，这使得难以在二维空间中导航页面。
此外，Cookie 同意按钮是固定的，即使同意后也无法移除。徽标和图标是低分辨率的 PNG，缩放效果不佳。视口未设置。
改进
- 使网站响应式。
- 为 Cookie 按钮添加一个**最小化按钮**。将最小化版本用作默认版本。
- 使用**矢量图形**（如 SVG）代替光栅图形（如 PNG）。
所有内容和功能都可用
缩放时不应隐藏任何内容。
隐藏的选项卡
在这个来自索尼的示例中，产品信息的选项卡在使用页面缩放的桌面浏览器中不可访问。即使用户滚动，滚动也会发生在浏览器窗口外部。所有规格、功能、评论和支持都无法访问。问题在于整个部分是“粘性”的。
<section class="sticky-nav">
.sticky-nav {
position: fixed;
z-index: 1035;
top: 0;
}
此部分在移动视图中高 159 像素。放大四倍后，固定部分占据了桌面视图的 636 像素。浏览器高度为 720 像素，减去浏览器顶部部分，留给主要内容的空间不多。
固定内容不一定是不可访问的。要点是，您应该始终在常见的浏览器大小下使用页面缩放测试您的网站。
在移动视图中，选项卡下方的内容是可访问的。
华为的粘性导航高度不高，因此主要内容有足够的空间。
避免图像中的文本
在这个来自小米的示例中，缩放后的文本是像素化的，因为它属于图像的一部分。部分文本也在浏览器窗口之外，因此用户必须滚动才能阅读整个产品标题。使用纯 HTML 和 CSS 显示文本有很多好处，除了可访问性之外，还包括：响应式、可翻译和可搜索。
