javascript - How to change webpage zoom based on screen size? - Stack Overflow

admin管理员组

文章数量:1026989

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.

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.

• javascript
• html
• css
• zooming

Share Improve this question Follow asked May 17, 2020 at 2:09 TransformerTransformer 3111 gold badge11 silver badge22 bronze badges 1

• This is not an easy question. Maybe the devicePixelRatio can help you: developer.mozilla/en-US/docs/Web/API/Window/… Best, Paul – Pauloco Commented May 17, 2020 at 2:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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

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.

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.

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.

• javascript
• html
• css
• zooming

Share Improve this question Follow asked May 17, 2020 at 2:09 TransformerTransformer 3111 gold badge11 silver badge22 bronze badges 1

• This is not an easy question. Maybe the devicePixelRatio can help you: developer.mozilla/en-US/docs/Web/API/Window/… Best, Paul – Pauloco Commented May 17, 2020 at 2:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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

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.

本文标签： javascriptHow to change webpage zoom based on screen sizeStack Overflow