这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按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. 用STS和Maven的方式创建一个JavaWeb项目

    一.创建项目 1.Eclipse中用Maven创建项目,选maven-archetype-webapp,如下图: 创建好项目后,目录如下: 至此,项目已经创建完毕,下边是配置.关键所在!!! 二.项目 ...

  2. block(五)用法

    最近又从网上找了点block用法的博客,供大家参考. Block简介: Block的实际行为和Function很像,最大的差别是在可以存取同一个Scope的变量值.Block实体形式如下: ^(传入参 ...

  3. Linux定时器工具

    要使用crontab定时器工具,必须要启动cron服务: service cron start crontab的语法,以备日后救急 参见:http://blog.csdn.net/zlzlei/art ...

  4. TCP连接的TIME_WAIT过多导致 Tomcat 假死

    最近发现使用的Tomcat 7会经常假死.前端点击页面无任何反应,打开firebug,很多链接一直在等待服务器的反应.查看服务器的状态,CPU占用很少,最多不超过10%,一般只有2%,3%左右,内存占 ...

  5. appium简明教程(8)——那些工具

    那片笑声让我想起我的那些tool 在我生命每个角落静静为我开着 我曾以为我会永远守在她身旁 今天我们已经离去在人海茫茫 她们都老了吧 都更新换代了吧 幸运的是我曾陪她们开发 啦…… 想她 啦…… 她还 ...

  6. sql 置顶功能的查询

    sql中有置顶的需求,文章很多条,分页查询,要求置顶的在最前面: 只需要使用: order by 置顶字段 即可

  7. xml中的<![CDATA[]]> 简介

    被<![CDATA[]]>这个标记所包含的内容将表示为纯文本,比如<![CDATA[<]]>表示文本内容“<”.  此标记用于xml文档中,我们先来看看使用转义符的 ...

  8. Java 8 – Filter a null value from a Stream

    Java 8 – Filter a null value from a Stream package com.mkyong.java8; import java.util.List;import ja ...

  9. FIR基本型仿真_03

    作者:桂. 时间:2018-02-05 20:50:54 链接:http://www.cnblogs.com/xingshansi/p/8419452.html 一.仿真思路 设计低通滤波器(5阶,6 ...

  10. Zookeeper服务器配置项详解

    文章转自: http://www.bug315.com/article/159.htm http://www.bug315.com/article/160.htm Zookeeper是通过一个***. ...