时间戳

首页 > 解决方案 > 如何避免用户能够将浏览器缩放级别设置为低于某个阈值？

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

问题描述

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

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

低于 67% 的浏览器缩放级别

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

标签： htmlcssgoogle-chromefrontendzoom-sdk

解决方案

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

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

这是一个线性渐变背景，显然您可以根据需要更改为具有不同的角度或颜色。如果它作为包含三个内联信息的 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 15%, #ffe083 15%, #ffe083 18%, #ffc106 18%, #ffc106 82%, #ffe083 82%, #ffe083 85%, transparent 85%);
}
<div class="stripe"></div>

推荐阅读