javascript检测浏览器的缩放状态实现代码 是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放)

这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放)。
检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放。这里提供javascript的方法来检测浏览器的缩放。
对于 IE6,就直接无视了,因为 IE6 只能对文本进行缩放。
先来说说浏览器提供的标准检测接口,window.devicePixelRatio 是设备上物理像素和设备独立像素的比例,该属性就可以用于检测网页是否被缩放了。在普通的 PC 浏览器上,在默认无缩放的情况下其默认值是 1。目前Firefox、chrome等都得到了很好的支持。
接下来该说说 IE 的处理方法了。IE 提供了 window.screen.deviceXDPI 和 window.screen.logicalXDPI 两个属性,deviceXDPI 就是对应的设备上的物理像素,而 logicalXDPI 就是对应了设备独立像素的比例。估计标准的检测接口也只是基于 IE 这种方法的一种改进。这两个属性在 windows XP+ 以上的系统上的默认值都是 96,因为系统默认的就是 96dpi 。
对于以上两种都不支持的浏览器,还可以利用window.outerWidth 和 window.innerWidth 这两个属性。outerWidth 返回的是窗口元素的外部实际宽度,innerWidth 返回的是窗口元素的内部实际宽度,这两个宽度都包含了滚动条在内的宽度。
有了这些属性基本就可以搞定 PC 浏览器上常见的浏览器了。实现代码如下:

方法一:

detectZoom 函数的返回值如果是 100 就是默认缩放级别,大于 100 则是放大了,小于 100 则是缩小了。

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;
};

  

方法二:

var obj = {‘window.devicePixelRatio‘:window.devicePixelRatio,‘screen.deviceXDPI / screen.logicalXDPI‘:screen.deviceXDPI / screen.logicalXDPI,

           ‘window.outerWidth / window.innerWidth‘:window.outerWidth / window.innerWidth,
           ‘document.documentElement.offsetHeight / window.innerHeight‘:document.documentElement.offsetHeight / window.innerHeight,

           ‘window.top.outerWidth / window.top.innerWidth‘:window.top.outerWidth / window.top.innerWidth}

        function print(obj){
          var s = ‘‘;
          for(var key in obj){
            s+=key;
            s+=‘ : ‘;
            s+=obj[key];
            s+=‘\n\r‘
          }
          document.write(s)

        }
print(obj)

  

时间: 2024-10-17 18:53:11

javascript检测浏览器的缩放状态实现代码 是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放)的相关文章

用JavaScript检测浏览器

如果你真的需要检测浏览器的类型,用JavaScript很容易实现. View Demo Download Source from GitHub JavaScript有一个navigator的标准对象,它包含了关于浏览器使用的信息. navigator对象由很多属性,但是userAgent属性---一个字符串就已经包含了浏览器.操作系统以及其它我们需要的所有信息. 如果需要显示navigator.userAgent的值,只需要选择下面的一种的方式就可以: Alert // Display in a

JavaScript开发之旅(2):幻灯片播放代码(等比缩放)

在web开发过程中,少不了使用幻灯片展示.我做的这个幻灯片要放到webbrowser控件里面展示.而我需要做四宫格,九宫格,十六宫格,可能还需要做一个十二宫格.每个宫格放一张图片,一个标题和价格.图片通过JS来读取.一屏一屏的切换.当然,切换可以自己设置切换样式,这些就是我的这个小动画需求. 正因为如此,我必须要考虑下面这两个问题: 第一个问题,就是我做页面可以在VS2005中的控件webbrowser中正常显示. 回答:通过查资料我知道了. VS 2008 SP1 在Visual Studio

jQuery实现检测浏览器及版本的脚本代码

jQuery实现检测浏览器及版本的脚本代码:在某些特定的场景下,应用进度条效果,可以提高网站的人性化程度,能够让用户能够掌握进度,增加对进度的耐心,否则可能直接导致关闭页面,从来导致网站流失用户,下面就是用过jQuery实现的进度效果代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="

Javascript检测浏览器对CSS属性的支持 /* supports */

//检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml Ms O Moz Webkit'.split(' '); return function(prop) { if ( prop in div.style ) return true; var len = vendors.length; prop = prop.replace(/^[a-z]/, fun

JavaScript 检测浏览器是否支持 CSS 变量

JavaScript 检测浏览器是否支持 CSS 变量: const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); if (isSupported) { /* supported */ } else { /* not supported */ } JavaScript 操作 CSS 变量的写法如下: // 设置变量 document.body.style.s

JS检测移动端横竖屏的代码

这篇文章主要介绍了JS检测移动端横竖屏的代码,需要的朋友可以参考一下 使用media来判断屏幕宽度遇到的问题: ios上当我旋转屏幕的时候可行,但是安卓机上没反应,横屏显示的还是我竖屏的样式. 查了一下资料,css3的media如果要在移动端有较好的显示效果,需要在页头加上这段代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-s

javascript弹出可以拖动的窗口代码实例

javascript弹出可以拖动的窗口代码实例: 在很多网页效果中,点击网页的某个地方能够弹出一个窗口,并且能够在屏幕中随便拖动,非常的人性化,下面就是一段能够实现此功能的代码实例,希望能够对大家带来帮助,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.

用JavaScript检测视频格式支持

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>用JavaScript检测视频格式支持</title> <script type=&q

用JavaScript检测音频格式支持

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>用JavaScript检测音频格式支持</title> <script type=&q