JavaScript 检测用户是否缩放网页 - 文章教程

JavaScript 检测用户是否缩放网页

发布于 2018-09-25 字数 2782 浏览 1471 评论 0

本文章来给各位同学介绍一段关于 JavaScript 浏览器缩放的检测实现方法,希望此代码给各位会有所帮助,很多 WEB 开发者可能都会碰到这种头痛的问题,就是当用户对页面进行缩小或放大时,原本好好的布局就被破坏了。如果让网页支持自适应的缩小和放大布局,对于开发者来说是一个不小的挑战。

为什么会缩放

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

如何处理缩放

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

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

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

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

有了这些属性基本就可以搞定 PC 浏览器上常见的浏览器了。

实现代码

//检查是否缩放
function detectZoom(){
  var ratio = 0,
  screen = window.screen,
  ua = navigator.userAgent.toLowerCase();

  if( ua.indexOf('firefox') > 0 ){ //火狐浏览器
    if( window.devicePixelRatio !== undefined ){
      ratio = window.devicePixelRatio;
    }
  }else if( ua.indexOf('msie') > 0 ){  //IE浏览器
    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安全浏览器下浏览器最大化时诡异的outerWidth和innerWidth不相等
  if( ratio === 99 || ratio === 101 ){
    ratio = 100;
  }

  //return screen.deviceXDPI;
  return ratio;
};

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论