首页 > 一句话, 日常 > js 获取网页的缩放比例

js 获取网页的缩放比例

随着硬件的发展,屏幕分辨率做的越来越大,相同的环境下,分辨率越高,视觉上看起来文字就越小。

操作系统本身提供了DPI的缩放,但是这个操作并不影响网页里的内容。值得幸庆的是,现代浏览器提供了网页内容的缩放功能。

那么,如果我们想获取浏览器的缩放比例以加载不同的样式和脚本,要怎么做呢?

现代浏览器提供了标准接口,window.devicePixelRatio 表示为设备上物理像素和设备独立像素的比例。

对于IE而言,IE 提供了 window.screen.deviceXDPI 和 window.screen.logicalXDPI 两个属性,deviceXDPI 就是对应的设备上的物理像素,而 logicalXDPI 就是对应了设备独立像素的比例。

下面就是代码了:

function getPageZoom() {
var ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();

if (window.devicePixelRatio !== undefined) {
//现代浏览器直接支持
ratio = window.devicePixelRatio;
}
else if (~ua.indexOf(‘msie’)) {
//兼容低版本的IE浏览器
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
}

if (ratio) {
ratio = Math.round(ratio * 100);
}

return ratio;
};

现在就可以根据自己的业务来做不同的处理了。

分类: 一句话, 日常 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.