JavaScript 检测用户是否缩放网页

发布于 2018-09-25 23:12:44 字数 2068 浏览 1540 评论 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 则是缩小了。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。