在响应式设计中，浏览器中的缩放被推断为Mobile

Question

我有一个呈现下拉列表的网页。根据设计，我想禁用移动中的下拉菜单。我使用查看端口大小作为标准来确定当前设备是否为移动设备。每当我放大到200%或更高时，视口大小就会缩小，并被推断为移动设备。因此，下拉菜单不会渲染。我不想将navigator.userAgent用于此目的。有其他解决方法吗？

Answer 1

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

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

所以，如果你的页面宽度是1000px：

• 在125%缩放时，您的CSS像素将为800px(1000/1.25(
• 在150%缩放时，您的CSS像素将为667px(1000/1.5(
• 在200%缩放时，CSS像素将为500px(1000/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

Answer 2

您可以使用媒体查询max-device-width，它获取实际的设备渲染屏幕大小，而不是视口大小。

例如：

.nav-menu {
@media only screen and (max-device-width: 768px) {
display: none;
}
}