我们在做大屏的时候经常在开发环境开发的时候显示很完美，但是到了客户电脑就花样百出，出去浏览器对CSS3和js语言新特性的兼容问题，其实大多是因为网页的缩放比，或者用户的高分屏的一些设置问题，如图
通常这样设置没有问题，但是有些笔记本高分屏，默认缩放比就是125%.这样可能原来1920的大屏显示在1536宽度的屏幕上肯定会出现问题。
首先我们我们可以通过js获取当前的显示器的尺寸
width、height、就是当前的显示器在当前分辨率下的尺寸，availWidth、availHeight是可使用尺寸（一般是去除工具栏的尺寸）
接着
window.outerHeight;//浏览器外框宽window.outerWidth;//浏览器外框高window.innerWidth;//浏览器内框宽（通常是和外框宽一致，开启F12时候，去除开发者工具占的空间）window.innerHeight;//浏览器内框高（去除标签栏，地址栏，收藏夹栏等等）动态获取浏览器缩放
function detectZoom (){ var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf('msie')) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { ratio = window.outerWidth / window.innerWidth; } if (ratio){ ratio = Math.round(ratio * 100); } return ratio;};到此我们拿到的是全屏时候的一个真实外框与内框的比，这个比的倒数n就是要设置容器的transform:scale(n);