DEV Community

how to change the whole page scale (zoom) ?

mostafalaravel on December 14, 2020

Hello , I would like to change the default page view scale to 90% . I work on a vuejs project: <head> <meta charset="utf-8"> ...
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));
}