我们在做大屏的时候经常在开发环境开发的时候显示很完美,但是到了客户电脑就花样百出,出去浏览器对CSS3和js语言新特性的兼容问题,其实大多是因为网页的缩放比,或者用户的高分屏的一些设置问题,如图
![v2-90c7d3d8c05bdd9237f62e107ce26a93_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/986b1456ed8feb92885944bfecc6192a.png)
通常这样设置没有问题,但是有些笔记本高分屏,默认缩放比就是125%.这样可能原来1920的大屏显示在1536宽度的屏幕上肯定会出现问题。
首先我们我们可以通过js获取当前的显示器的尺寸
![v2-3d094c6d6c007e205b0d871ab00cbe97_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/a54f1f34dce4a0b8d0dbb48d2081ac43.png)
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);