Broswer:浏览器缩放的检测

最近遇到检测浏览器窗口缩放的问题,不经意间看到刀哥的这篇文章,在此收藏了,感谢刀哥的分享。以下正文。。。

很多 WEB 开发者可能都会碰到这种头痛的问题,就是当用户对页面进行缩小或放大时,原本好好的布局就被破坏了。如果让网页支持自适应的缩小和放大布局,对于开发者来说是一个不小的挑战。

在我看来如果用户有意识的去对网页进行缩放,那么就应该知道缩放会破坏布局。还有很多用户其实压根不知道自己是何时对网页进行了缩放,此时就需要提醒用户应该将浏览器的缩放级别重置成默认的比例。

说到浏览器的缩放检测,可能有好几种方法都可以实现,从检测 CSS 样式到检测 Flash 的尺寸,可以说是各显神通,但我都觉得有点麻烦。其实还有更简便的方法的,当然各个浏览器的检测方法又有不同,对于 IE6,就直接无视了,因为 IE6 只能对文本进行缩放。

先来说说浏览器提供的标准检测接口,window.devicePixelRatio 是设备上物理像素和设备独立像素的比例,该属性就可以用于检测网页是否被缩放了。在普通的 PC 浏览器上,在默认无缩放的情况下其默认值是 1。可惜这么方便的属性目前只有 Firefox 支持。

好吧,接下来该说说 IE 的处理方法了。IE 提供了 window.screen.deviceXDPI 和 window.screen.logicalXDPI 两个属性,deviceXDPI 就是对应的设备上的物理像素,而 logicalXDPI 就是对应了设备独立像素的比例。估计标准的检测接口也只是基于 IE 这种方法的一种改进。这两个属性在 windows XP+ 以上的系统上的默认值都是 96,因为系统默认的就是 96dpi 。

对于 webkit 和 opera,它们都支持 window.outerWidth 和 window.innerWidth 这两个属性。outerWidth 返回的是窗口元素的外部实际宽度,innerWidth 返回的是窗口元素的内部实际宽度,这两个宽度都包含了滚动条在内的宽度。

有了这些属性基本就可以搞定 PC 浏览器上常见的浏览器了。实现代码如下:

var detectZoom = function(){ 
    var ratio = 0,
        screen = window.screen,
        ua = navigator.userAgent.toLowerCase();

    if( ~ua.indexOf('firefox') ){
        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 );
    }
    
    // 360安全浏览器下的innerWidth包含了侧边栏的宽度
    if( ratio !== 100 ){
        if( ratio >= 95 && ratio <= 105 ){
            ratio = 100;
        }
    }
    
    return ratio;
};


本文转载自刀神博客。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值