前端代碼實現整體縮放網頁，做到縮放分辨率的效果

需求:

設計圖是按照1920*1080的設計的，版心1200px,上線之后，需求方在筆記本電腦，大概邏輯分辨率寬度為1536px的屏幕上看，結果出現整體偏大情況。
對於這一需求，最原始的想法是，讓設計重新設計，一個個區域改代碼縮小。但這么做，肯定不是最好的方案。
我們按住CTRL和+號鍵盤，可以縮放網頁，對於需求方的1536邏輯分辨率，縮小80%，邏輯分辨率就可以達到1920的設計圖尺寸，不會存在過大的情況了。
那么，問題轉化為怎樣用代碼實現瀏覽器縮放的功能

1.   2d轉換：transform:scale(0.8)

這種第一反應非常好，直接縮小html元素。代碼如下

@media screen and (max-width: 1900px) {
  html {
    transform: scale(0.8);
  }
}

然而實際效果並不如意版心不居中了，雖然這個也可以解決，但顯然不是最佳方案。

其次，transform:scale(0.8)會改變一些東西，比如縮放之后：固定定位會變成絕對定位。
如果用了其他UI框架，縮小后各種問題非常多：筆者用的ant design vue ,縮放后，下拉框的內容找不到了。

放棄這種方案。

2.   zoom:0.8

這不是一個標准屬性，代碼如下：

<style>
@media screen and (max-width: 1900px) {
  html {
    zoom: 0.8;
  }
}
</style>

　　

這種就非常好，唯一遺憾的FireFox不支持。其他瀏覽器基本上都支持。
還有個注意點，縮放后，用原生js獲得元素位置和滾動到特定位置會出偏差。不過這種頁面應用比較少。