Javascript 在响应式设计中，放大被推断为移动的浏览器

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

您可以使用媒体查询

最大设备宽度

，它获取实际的设备渲染屏幕大小，而不是视口大小

例如：

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

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

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

因此，如果页面宽度为1000px：

• 125%缩放时，CSS像素将为800px（1000/1.25）
• 在150%缩放时，CSS像素将为667px（1000/1.5）
• 在200%缩放时，CSS像素将为500px（1000/2）

如果要在不影响CSS像素的情况下缩放页面，可以使用CSS

transform

属性进行定制

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

我预见到这种方法的问题是，它必然需要侧滚

WCAG 2.1 SC 1.4.10要求：

内容可以在不丢失信息或功能的情况下呈现，并且对于宽度相当于320个CSS像素的垂直滚动内容，不需要进行二维滚动

---

你能分享你的CSS做媒体查询吗？我现在没有媒体查询。我用js在移动时直接不渲染下拉列表。你能分享css媒体查询的任何示例/添加的示例吗