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控制,可对图片进行多点触控缩放和拖动类,包括了对图片放大和图片 ...
随机推荐
- 转:SpringMVC中日期格式的转换
解决日期提交转换异常的问题 由于日期数据有很多种格式,所以springmvc没办法把字符串转换成日期类型.所以需要自定义参数绑定.前端控制器接收到请求后,找到注解形式的处理器适配器,对RequestM ...
- numpy ndarray可用的常规函数
该部分位于numpy - ref - 1.14.5中的2.8 available ufuncs 1 数学运算 1.1 元素级加法 add 加法规则: numpy.add(x1, x2, /, out= ...
- thinkphp导航高亮的方法
因为引入了公共的 header.html,所以需要使用 js来实现向 li 加入active的高亮属性,这里我通过url地址和href的地址进行判断 // 这里对当前页面导航高亮 $(function ...
- 12C的审计模式
1.Mixed Auditing Policy 混合审计模式支持新的审计引擎和老的审计引擎一起工作数据库升级后,已有的审计设置不会受到影响.但是官方建议迁移到统一审计模式.数据库创建后,默认是使用混合 ...
- python .dcm文件读取,并转化为.jpg格式
.dcm文件是DICOM(Digital Imaging and Communications in Medicine)即医学数字成像和通信中记录医学图像和相关信息的文件,在用于医学图像处理的时候我们 ...
- easyui中combobox的值改变onchang事件
今天在公司里,那jquery中的easy-ui-里面的combobox,真的郁闷死了! 把郁闷的事情记下来,下次就不会犯错了! 首先,肯定少不了,引入jquery的js文件!请大家注意了! 下面是代码 ...
- windows系统如何通过Xshell 客户端连接 linux系统(主要介绍ubuntu系统)
一. 1.查看ubuntu系统的ip地址:ifconfig 在window系统运行窗口下:ping ubuntu系统的IP地址:例如:ping 192.168.163.129 出现下述命令就是ping ...
- RxJava学习笔记(组合Observables)(转)
组合Observable 当我们需要处理多个Observable的时候,我们可以通过Rxjava的组合函数来创建我们自己想要的Observable. Merge RxJava的 merge() 方法将 ...
- Django基于正则表达式的URL(2)
Django基于正则表达式的URL(2) 1. 关于正则的说明 url(r'^detail-(\d+)-(\d+).html',views.detail), 当客户端输入 127.0.0.1:8000 ...
- 解决iPad/iPhone下手机号码会自动被加上a标签的问题
解决办法: 在页面顶部<head></head>中增加: <meta name="format-detection" content="te ...