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

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

我有一个 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;
    }
  }  
}

解决方法

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

有效像素

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

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

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

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

使网站对移动设备友好，您就不会遇到任何问题。

相关 WCAG 指导

要遵守 WCAG "Success Criterion 1.4.10: Reflow"，您的网站应该在 1280 像素宽的浏览器上以 400% 的缩放比例工作 - 这相当于 320 像素宽。如果您使用最小宽度为 320 像素的媒体查询使网站对移动设备友好（响应式设计），则您通过了条件。