这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按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)

  

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

  1. 用 JavaScript 检测浏览器在线/离线状态(JavaScript API — navigator.onLine)

    如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术,所以用 JavaScript 检测浏览器在线/离线状态非常常见. 无论浏览器是否在线,navigator.onLine 属 ...

  2. javascript 检测浏览器类型和版本的代码

    方法1:对象/特征检测法 该方法是一种判断浏览器能力(而非浏览器的确切型号)的通用方法.大部分JS专家认为这个方法最合适,因为他们认为按照该方法所编写的脚本是经得起未来考验的. //获取IE浏览器的版 ...

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

    //检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...

  4. javascript检测当前浏览器是否为微信浏览器

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. Javascript系列: Google Chrome调试js代码(zz)

    你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...

  6. JavaScript检测原始值、引用值、属性

    上周写过一篇读书笔记<编写可维护的JavaScript>之编程实践,其中 第8章 避免『空比较』是博主在工作中遇坑较多的雷区,所以特此把该章节重新整理分享,希望大家不再坑队友(>﹏& ...

  7. 使用CodeMirror在浏览器中实现编辑器的代码高亮效果

    使用CodeMirror在浏览器中实现编辑器的代码高亮效果 在网站后台管理中希望能够对网站的样式表css与js文件以及模板html进行管理,在编辑的时候只是以普通文本展示又太普通,显得好难看,于是便在 ...

  8. JavaScript检测之basevalidate.js

    上篇文章「JavaScript检测原始值.引用值.属性」中涉及了大量有用的代码范例,为了让大家更方便的使用这些代码,博主特意把这些代码重新整理并托管到 GitHub,项目地址是:https://git ...

  9. Android----基于多触控的图片缩放和拖动代码实现

    引自:http://www.codefans.net/articles/584.shtml 一个android中自定义的ImageView控制,可对图片进行多点触控缩放和拖动类,包括了对图片放大和图片 ...

随机推荐

  1. 【RS】Local Latent Space Models for Top- N Recommendation-利用局部隐含空间模型进行Top-N推荐

    [论文标题]Local Latent Space Models for Top- N Recommendation  (KDD-2018 ) [论文作者]—Evangelia Christakopou ...

  2. HDU 4006 The kth great number (优先队列)

    The kth great number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Oth ...

  3. Less入门与安装(转)

    快速入门 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. Less 可以运行在 Node.浏览 ...

  4. 【SqlServer】SqlServer中Alter语句的使用

    在修改Sql Server表结构时,常用到Alter语句,把一些常用的alter语句列举如下. 1:向表中添加字段 Alter table [表名] add [列名] 类型 2:  删除字段 Alte ...

  5. iOS 11和xcode9

    最近发现了比较奇怪的问题,就是 ios10.几以前的版本,用xcode9 编写的程序   如果程序写的table是  plain的  ,那么  在  ios10.几及以下版本都会显示成group样式, ...

  6. Spring Cloud问题分析

    基于Spring Cloud框架开发时,经常会碰到各种开发问题,那么碰到这些问题时如何去解决呢?下面描述基于Spring Cloud问题定位的基本思路,大概可以分为如下几步: 排查配置问题 环境问题 ...

  7. 基于Amoba实现mysql主从读写分离

    一.Amoeba简介           Amoeba是一个以MySQL为底层数据存储,并对应用提供MySQL协议接口的proxy.它集中地响应应用的请求,依据用户事先设置的规则,将SQL请求发送到特 ...

  8. mysql远程访问,修改root密码

    mysql -uroot -p #input password use mysql; update user set host='%' where user='root'; flush privile ...

  9. 【转】Tesla Model S的设计失误

    Tesla Model S的设计失误 这幅美丽的图片,就是红极一时的Tesla电动车Model S的内景.然而你有没有发现,其中有一些不大对劲的地方?虽然我看好电动汽车,它们环保,安静,运动敏捷,然而 ...

  10. appium简明教程(5)——appium client方法一览

    appium client扩展了原生的webdriver client方法 下面以java代码为例,简单过一下appium client提供的适合移动端使用的新方法 resetApp() getApp ...