How do I set browser ABSOLUTE zoom level using CSS/Javascript?

Question

Things such as

document.body.style.zoom = 1.5;

in Javascript, and

body{zoom: 150%;} 

in CSS do not set absolute zoom level to 150%, they change it relatively to the current level.

How can I set it in an absolute way?

Answer 1

A percentage is a relative measurement, according to the mdn web docs even if you input a number it will be converted to its relative percentage. It also seems like zoom is a property not very supported. You can use transform: scale(factor) instead however this is also relative. If you want something exact you should probably just change the width and the height of the element and make it's inside react responsively. However, I'm really unaware of what you're trying to achieve or the context. I don't really understand why you'd want an absolute measurement to scale/zoom something.

Answer 2

Using the transform: scale property, you can get what you want. Just apply the property to the body and you can get something that mimics the zoom property. In the code below, the body tag is zoomed in by 150%

   body {
        transform: scale(1.5, 1.5)
    }