CODEWITHSUNDEEP
htmlcss
Sachin Singh
Sachin Singh

Reputation: 607

How to adjust the zoom of website at different browser at different screen size?

I have deployed a website it's zoom is fine at screen resolution 1920x1080. I want to zoom 80% at screen resolution 1366x768.

I tried to set

@media only screen and (min-width: 768px) {
    body {zoom: 80%;}
}

It works fine in chrome but not working properly in internet explorer and microsoft edge.

I have used meta tag for viewport.

<meta name="viewport" content="width=device-width, initial-scale=0.6,               maximum-scale=1, user-scalable=0">

I expect the output that at screen resolution 1366x768 the zoom of page is set to 80%. And it should be compatible with all browser.

Upvotes: 0

Views: 1442

Answers (2)

Koltharius
Koltharius

Reputation: 83

You can use media queries https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Maybe this can help you too https://css-tricks.com/snippets/html/responsive-meta-tag/

Upvotes: 0

Sai Manoj
Sai Manoj

Reputation: 3849

try using scale

@media only screen and (min-width: 768px) {
 transform:scale(0.8)
 transform-origin: 0 0;
}

Upvotes: 2

Related Questions