传统web适配PC和所有的高分辨率大屏2K、4K、8K

前言

        最近在开发公司官网的时候由于业务方、产品都没有明确开发响应式网站，就以前旧官网按照1920px的桌面端以及750px的移动端开发两套适配解决方案，在领导们开会时投屏电视以及苹果电脑都出现了两边留白，因为之前在网上找了一套css属性zoom的算法是根据设备的像素比window.devicePixelRatio来进行倍数缩放。

解决方案：

        之前一直被网上的解决方案带偏，经过仔细的思考后决定还是不能使用像素比来处理缩放这样会存在偏差，其实解决很简单你只要拿到body的真是宽度就行然后除以设计稿的宽度就是你的缩放比，你也可以根据window.screen.width * window.devicePixelRatio拿到物理设备分辨率，上代码。

let viewportWidth = window.innerWidth || document.documentElement.clientWidth; document.body.style.zoom = Math.round((viewportWidth / 1920) * 100000) / 100000;  window.addEventListener('resize', function() {   let viewportWidth = window.innerWidth || document.documentElement.clientWidth;   document.body.style.zoom = Math.round((viewportWidth / 1920) * 100000) / 100000; });

然后需要注意的一点就是页面在高清分辨率上字体要调整为自适应字体，以及各种动效页面注意怕错误留白需要收到调整下。