限制移动视图在缩放时不发生

Question

我有一个响应式设计的网页。

在移动设备上切换到移动视图，或者如果我通过inspect将桌面浏览器的视图切换到更小/移动。

正确。

但是当我在桌面上缩放到300-400%范围时，它也会切换到移动视图。

我不希望这种事发生。当我在桌面视图中缩放时，如果页面从视图中消失，我希望它保持桌面视图的水平滚动。

是否有可能将目标响应式设计仅用于移动设备而不用于缩放?

这是一个React应用程序，因此试图为整个页面找到一个通用的解决方案，而不是不得不干预各个组件。

比如一个组件可能有像

这样的样式

.sample {
border-radius: 2px 0 40px 0;
@media (min-width: 768px) {
padding-top: 4px;
}
}

另一个组件可能有这个

@media (max-width: 767px) {
.heading {
margin-left: 12px;
}
}

我不想单独处理这些。只是在寻找一种方法来关闭移动设计时，在桌面视图中使用缩放

Answer 1

css不能检测用户是否是移动设备，你需要一些javascript代码。你可以检测用户是否移动并保存它到state，并根据它来样式元素，因此你也会做一些内联样式。检测用户设备:

const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
if (/Mobi|Android/i.test(navigator.userAgent)) {
setIsMobile(true);
}
}, []);

和样式元素根据:

<div style={{ padding: isMobile ? '0px' : '10px' }}>

</div>