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)
javascript检测浏览器的缩放状态实现代码 是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放)的更多相关文章
- 用 JavaScript 检测浏览器在线/离线状态(JavaScript API — navigator.onLine)
如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术,所以用 JavaScript 检测浏览器在线/离线状态非常常见. 无论浏览器是否在线,navigator.onLine 属 ...
- javascript 检测浏览器类型和版本的代码
方法1:对象/特征检测法 该方法是一种判断浏览器能力(而非浏览器的确切型号)的通用方法.大部分JS专家认为这个方法最合适,因为他们认为按照该方法所编写的脚本是经得起未来考验的. //获取IE浏览器的版 ...
- Javascript检测浏览器对CSS属性的支持 /* supports */
//检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...
- javascript检测当前浏览器是否为微信浏览器
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- Javascript系列: Google Chrome调试js代码(zz)
你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...
- JavaScript检测原始值、引用值、属性
上周写过一篇读书笔记<编写可维护的JavaScript>之编程实践,其中 第8章 避免『空比较』是博主在工作中遇坑较多的雷区,所以特此把该章节重新整理分享,希望大家不再坑队友(>﹏& ...
- 使用CodeMirror在浏览器中实现编辑器的代码高亮效果
使用CodeMirror在浏览器中实现编辑器的代码高亮效果 在网站后台管理中希望能够对网站的样式表css与js文件以及模板html进行管理,在编辑的时候只是以普通文本展示又太普通,显得好难看,于是便在 ...
- JavaScript检测之basevalidate.js
上篇文章「JavaScript检测原始值.引用值.属性」中涉及了大量有用的代码范例,为了让大家更方便的使用这些代码,博主特意把这些代码重新整理并托管到 GitHub,项目地址是:https://git ...
- Android----基于多触控的图片缩放和拖动代码实现
引自:http://www.codefans.net/articles/584.shtml 一个android中自定义的ImageView控制,可对图片进行多点触控缩放和拖动类,包括了对图片放大和图片 ...
随机推荐
- Rplidar学习(二)—— SDK库文件学习
SDK头文件介绍 1.头文件简介: rplidar.h //一般情况下开发的项目中仅需要引入该头文件即可使用 RPLIDAR SDK 的所有功能. rplidar_driver.h //定义了 SDK ...
- HDU 4302 Holedox Eating (STL + 模拟)
Holedox Eating Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- Android上实现MVP模式的途径
今天我想分享我在Android上实现MVP(Model-View-Presenter)模式的方法.如果你对MVP模式还不熟悉,或者不了解为什么要在Android应用中使用MVP模式,推荐你先阅读这篇维 ...
- IT系统故障引起的一个事故的思考
记得几年前在我以前工作过的一个公司,因为系统的一个审批流突然中断,而且也没有在系统中触发邮件和短信等提示消息,而且我们的相关的审批人员和发 起人也没有在意.直到流程发起的同事在采购物品即将要使用的前2 ...
- NET MVC全局异常处理(一) 【转载】网站遭遇DDoS攻击怎么办 使用 HttpRequester 更方便的发起 HTTP 请求 C#文件流。 Url的Base64编码以及解码 C#计算字符串长度,汉字算两个字符 2019周笔记(2.18-2.23) Mysql语句中当前时间不能直接使用C#中的Date.Now传输 Mysql中Count函数的正确使用
NET MVC全局异常处理(一) 目录 .NET MVC全局异常处理 IIS配置 静态错误页配置 .NET错误页配置 程序设置 全局异常配置 .NET MVC全局异常处理 一直知道有.NET有相关 ...
- MYSQL内存评估
### MySQL Memory Calculator Procedure ### http://kedar.nitty-witty.com/blog/calculte-mysql-memory-us ...
- Linux中在防火墙中开启80端口的例子
最近自己在学习Linux.搭建一个LNMP环境.在测试时一切都好.然后重启Linux后.再次访问网站无法打开.最终原因是在防火墙中没有加入 80 端口的规则.具体方法如下: 在CentOS下配置ipt ...
- sql server中QUOTENAME()函数的用法
操作sql server尤其是写存储过程时,要用到各种各样的函数,今天就总结一个quotename()的用法. 1.语法: quotename('character_string'[,'quote_c ...
- C#基础课程之四集合(ArrayList、List<泛型>)
list泛型的使用 ArrayList list = new ArrayList(); ArrayList list = ); //可变数组 list.Add("我"); //Ad ...
- U811.1接口EAI系列之五--材料出库--VB语言
主要业务有:09其他出库单 11:材料出库单 32:销售出库单 主要业务代码: '材料出库生成XML Public Function xml_storeout(ds_head As MSHFlexGr ...