DEV Community

mostafalaravel
mostafalaravel

Posted on

how to change the whole page scale (zoom) ?

Hello ,

I would like to change the default page view scale to 90% .

I work on a vuejs project:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
(...)
Enter fullscreen mode Exit fullscreen mode

I tried initial-scale=0.7 but it's not working:

<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=1.0, user-scalable=no" />
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
moopet profile image
Ben Sinclair

Would it be better to adjust the size of everything in CSS?

Setting maximum-scale means you disable people's ability to do things like pinch-zoom, which is bad for accessibility.

Collapse
 
sanidz profile image
sanidz

Set the font-size on the body. Play with ems.

Collapse
 
mostafalaravel profile image
mostafalaravel

When I change the font size it doesn't change the pictures size also ..

I'm looking for a way to zoom out everything !

Collapse
 
sanidz profile image
sanidz

Include additional variable for ratio for example:

base-size: 1em
base-ratio: 1.5

Use ratio for calculating picture sizes and fonts as well...
Single img selector that uses calc will do:
img {
height: calc(100% *var(--base-ratio));
}