如何以不同的屏幕尺寸调整不同浏览器的网站缩放

Question

我已经部署了一个网站，在屏幕分辨率1920x1080上可以放大。我想在屏幕分辨率1366x768上缩小80％。

我尝试设置

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

它在Chrome中工作正常，但在Internet Explorer和Microsoft Edge中无法正常工作。

我使用了元标记作为视口。

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

我希望在屏幕分辨率1366x768页面的缩放设置为80％。它应该与所有浏览器兼容。

Answer 1

尝试使用scale

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

Answer 2

您可以使用媒体查询https://www.w3schools.com/cssref/cssss3_pr_mediaquery.asp

也许这也可以帮助您https://css-tricks.com/snippets/html/responsive-meta-tag/