如何避免用户将浏览器缩放级别设置为低于某个阈值？

问题描述

所以基本上我希望我网站的用户在任何时候都不能将缩放级别降低到某个点以下。这样做的原因是为了避免他们看到我的前端设计中的一些陷阱。基本上我想要一个倾斜的容器 abd，为了做到这一点，我使用 CSS 属性转换：“skewY()”使四个 div 围绕矩形和水平的“主”div 容器以一定角度放置。主要的一个包含水平字母和相应的背景颜色，其他的只是给出了倾斜的组件。这样，方形中央 div 看起来就像是在某个角度，就像这样：

。

但是，当缩放级别设置为低于 67% 时，就会出现缺陷，用户可以看到“水平 div”和环绕它的两个 div。它只是在尺寸上看起来很丑。即使我通过设置 CSS 属性（如位置相对、z-index、填充等）尽我最大的努力。我无法使其完美，显然，我会尝试隐藏不完美之处（因为隐藏它们不会正在影响网站的整体性能）：

我怎么能避免将缩放级别设置为低于某个百分比，以避免任何设备中的任何人都能看到缺陷？有没有比使用附件 div 更优雅的方法来制作“倾斜”的容器？

解决方法

我不确定，即使您可以阻止用户缩放到某些级别，在所有设备/视口纵横比中，它也会阻止您的布局出现一些扭曲。

相反，我想知道背景图像是否可以满足您的要求？

这是一个线性渐变背景，显然您可以根据需要更改为不同的角度或颜色。如果它作为一个 div 的背景图像保存您的三个内联信息，您将不必担心失真。

  background-image: linear-gradient(3deg,transparent 15%,#ffe083 15%,#ffe083 18%,#ffc106 18%,#ffc106 82%,#ffe083 82%,#ffe083 85%,transparent 85%);

* {
  margin: 0;
    padding: 0;
}

.stripe {
  --w: 100vw;
  width: var(--w);
  height: calc(var(--w) / 3);
  background-image: linear-gradient(3deg,transparent 85%);
}

<div class="stripe"></div>