How to avoid user to be able to set browser zoom level below a certain threshold?

Question

So basically I want the users of my website to be unable to reduce the zoom level below a certain point, at all times. The reason to do that is to avoid them to see some pitfalls of my frontend design. Basically I wanted a skewed container abd, in order to do so, I used CSS property transform: "skewY()" to make four divs placed at a certain angle around a rectangular and horizontal "main" div container. The main one contains the horizontal letters and the corresponding background colour and the other ones just give the skewed component. This way the squared central div would appear as if it was at a certain angle, like this:.

However, when the zoom level is set below 67%, imperfections arise and users can see the "horizontal div" and two divs that circle it. It just looks ugly at the sizes. Even though I tried my best by setting CSS properties such like position relative, z-index, padding, etc.. I couldn't manage to make it perfect, and obviously, I would try to hide the imperfections (since hiding them will not be affecting the overall performance of the website):

How could I just AVOID zoom level to be set below a certain percentage to avoid the imperfections to be seen by anyone in any device? Is there a more elegant way to make the "skewed" containers than using accessory divs?

score 0 · Answer 1 · answered Mar 09 '21 at 21:50

I am not certain that even if you could stop the user zooming to certain levels that it would, in all device/viewport aspect ratios, stop some distortion of your layout.

Instead I wondered whether a background-image would do what you want?

Here is a linear gradient background which obviously you can alter to have a different angle or colors as you want. If it sits as the background-image of a div which holds your three inline pieces of information you won't have to worry about distortion.

  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>

How to avoid user to be able to set browser zoom level below a certain threshold?

1 Answers1