java缩放浏览器_javascript检测浏览器的缩放状态实现代码

摘要：这篇JavaScript栏目下的“javascript检测浏览器的缩放状态实现代码”，介绍的技术点是“JavaScript、检测浏览器、缩放状态、实现代码、浏览器、代码”，希望对大家开发技术学习和问题解决有帮助。

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

};

原创文章，转载请注明：转载自前端开发

java缩放浏览器_javascript检测浏览器的缩放状态实现代码相关推荐

面向对象编程java小游戏_JavaScript面向对象编程小游戏---贪吃蛇代码实例
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1-2 维护非常方便并且成本较低. 2 这个demo是采用了面向 ...
安卓开发仿微信图片拖拽_Android仿微信朋友圈图片浏览器（支持图片手势缩放，拖动）...
[实例简介] Android仿微信朋友圈图片浏览器(支持图片手势缩放,拖动) [实例截图] [核心代码] ImageDemo-2014-02-18 └── ImageDemo-2014-02-18 ├ ...
IE浏览器网页无法缩放怎么办解决IE浏览器网页无法缩放的方法
IE浏览器网页无法缩放怎么办?我们在使用IE浏览器浏览网页的时候,想要缩放网页,却发现无法缩放.该怎么解决这个问题?下面就是解决IE浏览器网页无法缩放的方法,一起来看看吧! 今天使用了一下IE浏览器, ...
html浏览器pc端禁止缩放,阻止pc端浏览器缩放js代码
阻止pc端浏览器缩放js代码众所周知:移动端页面禁止用户缩放界面只需加上即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放: windows: ctrl + +/- ctrl + 滚轮浏 ...
微信浏览器网页点击图片缩放
微信浏览器网页点击图片缩放 <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></scri ...
打开的html文件不能放大缩小,IE浏览器网页无法缩放怎么办解决IE浏览器网页无法缩放的方法...
IE浏览器网页无法缩放怎么办?我们在使用IE浏览器浏览网页的时候,想要缩放网页,却发现无法缩放.该怎么解决这个问题?下面就是解决IE浏览器网页无法缩放的方法,一起来看看吧! 今天使用了一下IE浏览器, ...
php 检测分辨率,浏览器分辨率检测,屏幕分辨率检测
浏览器和屏幕分辨率检测浏览器窗口分辨率是: 浏览器全屏分辨率是: 屏幕分辨率是: 浏览器窗口分辨率指显示网页的区域,在PC端由于浏览器窗口大小可调节,这个值是可变的.在手机等移动端浏览器窗口大小不可 ...
java drawimage 缩放_H5CanvasAPI中drawImage(图像进行缩放或裁剪)的使用实例
这篇文章主要介绍了HTML5 Canvas API中drawImage()方法的使用实例,drawImage()方法主要用来对图像进行缩放或裁剪,文中给出了其坐标及相关参数的用法,需要的朋友可以参考下 ...
java使用selenium实现模拟浏览器操作API大全模拟登录
java selenium 模拟登录模拟浏览器 API大全 (一)环境安装之Java (二)环境安装之IntelliJ IDEA (三)环境安装之Selenium 1.通过jar包安装 2.通过Ma ...

java缩放浏览器_javascript检测浏览器的缩放状态实现代码

java缩放浏览器_javascript检测浏览器的缩放状态实现代码相关推荐

最新文章

热门文章