如何使用 javascript/css 强制网站页面缩放级别为固定值？

Question

I need html/css/javascript to fix everyone's zoom level on a website page. Does anyone have an idea on the javascript?

Answer 1

The only way I found that works natively is in designing my HTML/CSS with the units "vw" and "vh" (% relative to the viewport) instead of "px". You can use it everywhere you used to put "px" (font-size, width, height, padding, margin, etc...). Very useful for a page designed to be display full screen only (no scroll) or "Kiosk-style". "vw" and "vh" are not affected by browser zoom. See: https://www.w3schools.com/cssref/css_units.asp

Answer 2

You can use the document.onLoad to change the scale in CSS through Javascript:

var minimum_width = 840;        // Put you own value here
var desired_width = 1440;       // and here
var actual_width = document.all ? document.body.clientWidth : window.innerWidth;
var actual_height = document.all ? document.body.clientHeight : window.innerHeight;
if (desired_width > actual_width) {
    desired_width = actual_width;
}
if (desired_width < minimum_width) {
    desired_width = minimum_width;
}
var scale = Math.round(actual_width/desired_width*100)/100;
var desired_height = Math.round(actual_height/scale);
var body = document.body;
body.style.transform = "scale(" + scale + ")";
body.style.width = desired_width + "px";
body.style.minHeight = (desired_height) + "px";

Will work on most popular browsers.