<转>监测用户浏览器是否有缩放

本文介绍了一种检测浏览器缩放比例的方法,通过判断用户代理来选择不同的实现方式,包括IE、Firefox、Opera和Chrome等主流浏览器。对于不同浏览器,采用了如设备像素比查询、样式查询等技术。
用于判断用户的浏览器是否有缩放库:
!function(window){
    var document = window.document;
    function user_agent(){
        var ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf('msie')>=0) {
            return 'ie';
        };
        if (ua.indexOf('firefox')>=0) {
            return 'firefox';
        };
        if (ua.indexOf('chrome')>=0) {
            return 'chrome';
        };
        if (ua.indexOf('opera')>=0) {
            return 'opera';
        };
    }
    /* 设备检测
    *  继续探索一种不使用mediaQuery的方法,求推荐
    */
    var mediaQueryBinarySearch = function (property, unit, a, b, maxIter, epsilon) {
        var matchMedia;
        var head, style, div;
        if (window.matchMedia) {
            matchMedia = window.matchMedia;
        } else {
            head = document.getElementsByTagName('head')[0];
            style = document.createElement('style');
            head.appendChild(style);

            div = document.createElement('div');
            div.className = 'mediaQueryBinarySearch';
            div.style.display = 'none';
            document.body.appendChild(div);

            matchMedia = function (query) {
                style.sheet.insertRule('@media ' + query + '{.mediaQueryBinarySearch ' + '{text-decoration: underline} }', 0);
                var matched = getComputedStyle(div, null).textDecoration == 'underline';
                style.sheet.deleteRule(0);
                return {matches: matched};
            };
        }
        var ratio = binarySearch(a, b, maxIter);
        if (div) {
            head.removeChild(style);
            document.body.removeChild(div);
        }
        return ratio;

        function binarySearch(a, b, maxIter) {
            var mid = (a + b) / 2;
            if (maxIter <= 0 || b - a < epsilon) {
                return mid;
            }
            var query = "(" + property + ":" + mid + unit + ")";
            if (matchMedia(query).matches) {
                return binarySearch(mid, b, maxIter - 1);
            } else {
                return binarySearch(a, mid, maxIter - 1);
            }
        }
    };
    var zoom = {}
    zoom.ie = function(){
        return window.screen.deviceXDPI / window.screen.logicalXDPI;
    }

    zoom.firefox = function(){
        return mediaQueryBinarySearch('min--moz-device-pixel-ratio', '', 0, 10, 20, 0.0001);
    }

    zoom.opera = function(){
        return window.outerWidth / window.innerWidth;   
    }

    zoom.chrome = function(){
        if(window.devicePixelRatio) {
            return window.devicePixelRatio;
        }
        var div = document.createElement('div');
        div.innerHTML = '1';
        div.setAttribute('style','font:100px/1em sans-serif;-webkit-text-size-adjust:none;position: absolute;top:-100%;');
        document.body.appendChild(div);
        var zoom = 1000 / div.clientHeight;
        zoom = Math.round(zoom * 100) / 100;
        document.body.removeChild(div);
        return zoom;
    }

    //api
    window.detectZoom = function(){
        return zoom[user_agent()]();
    }    

}(this);

用法比较简单:

var zoom = detectZoom();
alert(zoom);


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值