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

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post