css - 辅助功能问题 - 当页面大小调整为 400% 缩放模式时，控件不可见/被截断

Question

我有一个 SharePoint 页面，其中水平显示以下三个控件，如下所示：

CSS如下：

.main {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  .searchText {
    width: 100%;
    max-width: 330px;
    margin-right: 25px;
  }

  .statusLabel {
    margin-right: 25px;
    margin-bottom: 8px;
  }

  .statusDropDown {
    min-width: 300px;
    max-width: 300px;
  }
}

将页面缩放到 400% 时，控件不可见/被截断，如下所示：

有没有办法在缩放到 400% 时垂直显示控件而不会被截断并确保所有控件都可见？

这是我到目前为止所尝试的：

CSS：

@media only screen and (min-width : 600px) and (max-width : 1200px) {
  .searchContainer {
    display: block;
  
    .searchText {
      width: 50%;
      display: block;
    }
  
    .statusLabel {
      width: 50%;
      display: block;
    }
  
    .statusDropDown {
      width: 50%;
      display: block;
    }
  }  
}

Answer 1

当您缩放浏览器媒体查询时，使用有效像素来计算是否应该激活它们。

有效像素

假设您的浏览器是 1366 像素宽（全屏时的标准笔记本电脑屏幕尺寸）。

当您缩放到 400% 时，您实际上将每个像素放大了 4 倍，或者换个角度来看，您将有效宽度缩小了 4 倍。

因此，在 400% 缩放的 1366px 宽浏览器窗口上，您实际上拥有一个 341.5px 宽 (1366/4) 的浏览器。

因此，如果您使用媒体查询使网站在 340 像素宽下正常工作，它将在笔记本电脑上以 400% 的浏览器缩放级别工作。

使网站对移动设备友好，您将没有问题。

相关 WCAG 指南

为了遵守WCAG“成功标准 1.4.10：重排”，您的网站应该在 1280 像素宽的浏览器上以 400% 的缩放比例工作 - 相当于 320 像素宽。如果您使用最小宽度为 320 像素的媒体查询使网站适合移动设备（响应式设计），则您通过了标准。