How to change webpage zoom based on screen size?

Question

Hi so I created a web page that looks fine on my desktop monitors. When I viewed the page using a laptop, the page looks abnormal. However, when I zoom the page to 67% it appears fine. Both my monitors and my laptop has the same resolution, 1920 x 1080, but my monitor is bigger than my laptop's one. I know that i can change zoom in CSS but it would look bad on my pc. I was wondering is there a way to change zoom based on screen size in javascript or CSS.

Answer 1

One option could be using media queries in your CSS to change the styles that get applied depending on the size of your screen. You could have one set of styles that works for larger screens like your PC, and another that applies for smaller screens like your laptop.

Answer 2

This can be done with JavaScript if you include the viewport meta tag in your HTML.

if (document.body.clientWidth < /*screen width pixels*/) {
  viewport = document.querySelector("meta[name=viewport]");
  viewport.setAttribute('content', 'width=device-width, initial-scale=0.67, user-scalable=0');
}

You can substitute the properties below with different values to test out what works for you.

initial-scale property controls the initial zoom level (possible range between 10%-1000% or 0.1-10.0).

user-scalable=0 prevents users from zooming