javascript - 在响应式设计中放大浏览器被推断为移动设备

问题描述

我有一个呈现下拉菜单的网页。按照设计，我想禁用 Mobile 中的下拉菜单。我使用视口大小作为判断当前设备是否为移动设备的标准。每当我放大到 200% 或更高时，视口大小都会减小，并且会被推断为移动设备。因此，下拉菜单不会呈现。我不想为此目的使用 navigator.userAgent。任何其他解决方法？

标签： javascriptreactjs

每当我放大到 200% 或更高时，视口大小都会减小，并且会被推断为移动设备。

您所描述的是缩放时设备像素和 CSS 像素之间的区别。随着浏览器缩放的增加，CSS 与设备像素的比率也会增加。这就是大多数浏览器的设计工作方式，也是访问者通常所期望的。

因此，如果您的页面宽度为 1,000 像素：

在 125% 缩放时，您的 CSS 像素将为 800px (1,000 / 1.25)
在 150% 缩放时，您的 CSS 像素将为 667px (1,000 / 1.5)
在 200% 缩放时，您的 CSS 像素将为 500px (1,000 / 2)

如果你想在不影响 CSS 像素的情况下缩放页面，你可以使用 CSStransform属性做一些自定义的事情。

body {
   transform: scale(2);
   transform-origin: 0 0;
}

我预见到这种方法的问题是它必然需要横向滚动。

WCAG 2.1 SC 1.4.10 要求：

可以在不丢失信息或功能的情况下呈现内容，并且不需要在二维中滚动垂直滚动内容，宽度相当于 320 CSS 像素 https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

javascript - 在响应式设计中放大浏览器被推断为移动设备

问题描述

解决方案

推荐阅读