DEV Community


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:

    <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)

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.

sanidz profile image

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

mostafalaravel profile image

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

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

sanidz profile image

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));

Why You Need to Study Javascript Fundamentals

The harsh reality for JS Developers: If you don't study the fundamentals, you'll be just another “Coder”. Top learnings on how to get to the mid/senior level faster as a JavaScript developer by Dragos Nedelcu.