CODEWITHSUNDEEP
javascripthtmlcsszooming
Transformer
Transformer

Reputation: 31

How to change webpage zoom based on screen size?

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.

Upvotes: 3

Views: 9968

Answers (2)

Ryan
Ryan

Reputation: 25

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

Upvotes: 1

timtim17
timtim17

Reputation: 295

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.

Upvotes: 0

Related Questions