Javascript 如何在所有现代浏览器中检测页面缩放级别?
如何在所有现代浏览器中检测页面缩放级别?虽然这说明了如何在IE7和IE8中实现,但我找不到一个好的跨浏览器解决方案Javascript 如何在所有现代浏览器中检测页面缩放级别?,javascript,browser,zooming,detection,Javascript,Browser,Zooming,Detection,如何在所有现代浏览器中检测页面缩放级别?虽然这说明了如何在IE7和IE8中实现,但我找不到一个好的跨浏览器解决方案 Firefox存储页面缩放级别以备将来访问。在第一页加载时,我是否能够获得缩放级别?在我读到的某个地方,当页面加载后发生缩放变化时,它会起作用 有没有办法捕获的“缩放”事件 我需要这个,因为我的一些计算是基于像素的,缩放时它们可能会波动 由@tfl提供的修改样本 缩放时,此页面会提醒不同的高度值 Lorem ipsum dolor sit amet,是一位杰出的献身者。这是一个
的“缩放”
事件由@tfl提供的修改样本 缩放时,此页面会提醒不同的高度值
Lorem ipsum dolor sit amet,是一位杰出的献身者。这是一个很好的解决方案。莫利斯帝国的整数尊严。暂时停止,暂时停止。在自然社会中,因怀孕而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯。拍卖人lorem vitae Temporal。素素调味品。妊娠期要素不明确。梅塞纳斯·马蒂斯·莫莱斯蒂·尼斯坐在汽车上。Donec semper tristique blandit。前庭无裂位。
显示
在这里它不会改变!:
<html>
<head>
<title></title>
</head>
<body>
<div id="xy" style="width:400px;">
foobar
</div>
<div>
<button onclick="alert(document.getElementById('xy').style.width);">Show</button>
</div>
</body>
</html>
福巴
显示
创建一个简单的html文件,点击按钮。无论缩放级别如何:它都会显示400px的宽度(至少在firefox和ie8中是这样)您的计算仍然基于大量CSS像素。它们现在在屏幕上的大小不同了。这就是整页缩放的要点
您希望在192dpi设备上的浏览器上发生什么情况,因为该设备通常为图像中的每个像素显示四个设备像素?在50%缩放时,此设备现在在一个设备像素中显示一个图像像素。没有对IE进行测试,但如果使用
min-width: 100%
然后
将为您提供浏览器缩放级别(包括
document.body.style.zoom
因子)。在Internet Explorer 7、8和9中,此功能:
function getZoom() {
var screen;
screen = document.frames.screen;
return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}
添加“+0.9”是为了防止舍入错误(否则,当浏览器缩放分别设置为105%和110%时,您将获得104%和109%)
在IE6中,zoom不存在,因此没有必要检查zoom。现在比第一次问这个问题时更混乱。通过阅读我能找到的所有回复和博客帖子,这里是一个总结。我也成立了 编辑(2011-12-12):我添加了一个可以克隆的项目:
- IE8:
(或者,对于相对于默认缩放的缩放级别,screen.deviceXDPI/screen.logicalXDPI
)screen.systemXDPI/screen.logicalXDPI
- IE7:
var body=document.body,r=body.getBoundingClientRect();返回(右左-右)/body.offsetWidth代码>(感谢或)
- FF3.5仅限:
/media query screen width(见下文)(利用了screen.width
使用设备像素,而MQ width使用CSS像素这一事实,这多亏了)screen.width
- FF3.6:无已知方法
- FF4+:媒体查询二进制搜索(见下文)
- WebKit:(感谢评论中的Teo)
- WebKit:使用
测量div的首选大小-WebKit text size adjust:none
- WebKit:(自启用以来已中断)
(感谢)。要获得设备像素的比率(而不是相对于默认缩放),请乘以document.width/jQuery(document.width()
window.devicePixelRatio
- 旧WebKit?(未验证):
(from)parseInt(getComputedStyle(document.documentElement,null.width)/document.documentElement.clientWidth
- Opera:
/位置的宽度:固定;宽度:100%div(表示这是一个bug;innerWidth应该是CSS-px)。我们使用position:fixed元素获得视口的宽度,包括滚动条所在的空间;document.documentElement.clientWidth不包括此宽度。从2011年的某个时候起,这一点就被打破了;我再也不知道如何在歌剧中获得缩放级别了document.documentElement.offsetWidth
- 其他:
- 不可靠:倾听鼠标事件并测量screenX中的变化/clientX中的变化
<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
var style = document.getElementById('binarysearch');
var dummyElement = document.getElementById('dummyElement');
style.sheet.insertRule('@media (' + property + ':' + r +
') {#dummyElement ' +
'{text-decoration: underline} }', 0);
var matched = getComputedStyle(dummyElement, null).textDecoration
== 'underline';
style.sheet.deleteRule(0);
return matched;
};
var mediaQueryBinarySearch = function(
property, unit, a, b, maxIter, epsilon) {
var mid = (a + b)/2;
if (maxIter == 0 || b - a < epsilon) return mid;
if (mediaQueryMatches(property, mid + unit)) {
return mediaQueryBinarySearch(
property, unit, mid, b, maxIter-1, epsilon);
} else {
return mediaQueryBinarySearch(
property, unit, a, mid, maxIter-1, epsilon);
}
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
'min-device-width', 'px', 0, 6000, 25, .0001);
</script>
用于测试媒体查询的虚拟元素。
var mediaQueryMatches=函数(属性,r){
var style=document.getElementById('binarysearch');
var dummeyelement=document.getElementById('dummeyelement');
style.sheet.insertRule('@media('+property+'):'+r+
“){#dummeyelement”+
“{文本装饰:下划线}”,0);
var matched=getComputedStyle(dummeyElement,null).textDecoration
=='下划线';
样式表删除规则(0);
返回匹配;
};
var mediaQueryBinarySearch=函数(
属性,单位,a,b,最大值,ε){
var mid=(a+b)/2;
if(maxIter==0 | | b-a
对于我来说,对于Chrome/Webkit,document.width/jQuery(document.width()
不起作用。当我把我的窗口缩小并放大到我的网站时,horizont
function getZoom() {
var screen;
screen = document.frames.screen;
return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}
<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
var style = document.getElementById('binarysearch');
var dummyElement = document.getElementById('dummyElement');
style.sheet.insertRule('@media (' + property + ':' + r +
') {#dummyElement ' +
'{text-decoration: underline} }', 0);
var matched = getComputedStyle(dummyElement, null).textDecoration
== 'underline';
style.sheet.deleteRule(0);
return matched;
};
var mediaQueryBinarySearch = function(
property, unit, a, b, maxIter, epsilon) {
var mid = (a + b)/2;
if (maxIter == 0 || b - a < epsilon) return mid;
if (mediaQueryMatches(property, mid + unit)) {
return mediaQueryBinarySearch(
property, unit, mid, b, maxIter-1, epsilon);
} else {
return mediaQueryBinarySearch(
property, unit, a, mid, maxIter-1, epsilon);
}
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
'min-device-width', 'px', 0, 6000, 25, .0001);
</script>
var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
zoomLevel = "5";
} else {
zoomLevel = "unknown";
}
var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;
<title>Home Page.</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/centerpage.js"></script>
// centering page element
function centerPage() {
// get body element
var body = document.body;
// if the body element exists
if (body != null) {
// get the clientWidth
var clientWidth = body.clientWidth;
// request data for centering
var windowWidth = document.documentElement.clientWidth;
var left = (windowWidth - bodyWidth) / 2;
// this is a hack, but it works for me a better method is to determine the
// scale but for now it works for my needs
if (left > 84) {
// the zoom level is most likely around 150 or higher
$('#MainBody').removeClass('body').addClass('body150');
} else if (left < 100) {
// the zoom level is most likely around 110 - 140
$('#MainBody').removeClass('body').addClass('body125');
}
}
}
// CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
// center the page
centerPage();
});
// centering panel
function centerPanel($panelControl) {
// if the panel control exists
if ($panelControl && $panelControl.length) {
// request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var panelHeight = $panelControl.height();
var panelWidth = $panelControl.width();
// centering
$panelControl.css({
'position': 'absolute',
'top': (windowHeight - panelHeight) / 2,
'left': (windowWidth - panelWidth) / 2
});
// only need force for IE6
$('#backgroundPanel').css('height', windowHeight);
}
}
$(window).resize(function() {
//YOUR CODE.
});
function isZoomed() {
var width, mediaQuery;
width = document.body.clientWidth;
mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';
return !window.matchMedia(mediaQuery).matches;
}
var zoomLevel = document.width / document.body.clientWidth;
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);
var snap = function (r, snaps)
{
var i;
for (i=0; i < 16; i++) { if ( r < snaps[i] ) return i; }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
[ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
);
var snap = function (r, snaps, ratios)
{
var i;
for (i=0; i < 16; i++) { if ( r < snaps[i] ) return eval(ratios[i]); }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
[ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
[ 0.25, '1/3', 0.5, '2/3', 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5 ]
);
zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth
<script>
var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
$(window).resize(function(){
zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
alert(zoom);
});
</script>
<body>
<div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>
var dppx = (function (precision) {
var searchDPPX = function(level, min, divisor) {
var wmq = window.matchMedia;
while (level >= min && !wmq("(min-resolution: " + (level/divisor) + "dppx)").matches) {
level--;
}
return level;
};
var maxDPPX = 5.0; // Firefox 22 has 3.0 as maximum, but testing a bit greater values does not cost much
var minDPPX = 0.1; // Firefox 22 has 0.3 as minimum, but testing a bit smaller values does not cost anything
var divisor = 1;
var result;
for (var i = 0; i < precision; i++) {
result = 10 * searchDPPX (maxDPPX, minDPPX, divisor);
maxDPPX = result + 9;
minDPPX = result;
divisor *= 10;
}
return result / divisor;
}) (5);
jQuery(function($){
zoom_level = function(){
$("body").prepend('<div class="overlay" ' +
'style="position:fixed; top:0%; left:0%; ' +
'width:100%; height:100%; z-index:1;"></div>');
var ratio = $("body .overlay:eq(0)").outerWidth() / $(window).width();
$("body .overlay:eq(0)").remove();
return ratio;
}
alert(zoom_level());
});
function supportFullCss3()
{
var div = document.createElement("div");
div.style.display = 'flex';
var s1 = div.style.display == 'flex';
var s2 = 'perspective' in div.style;
return (s1 && s2);
};
function getZoomLevel()
{
var screenPixelRatio = 0, zoomLevel = 0;
if(window.devicePixelRatio && supportFullCss3())
screenPixelRatio = window.devicePixelRatio;
else if(window.screenX == '0')
screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
else
{
var scr = window.frames.screen;
screenPixelRatio = scr.deviceXDPI / scr.systemXDPI;
}
//---------------------------------------
if (screenPixelRatio <= .11){ //screenPixelRatio >= .01 &&
zoomLevel = "-7";
} else if (screenPixelRatio <= .25) {
zoomLevel = "-6";
}else if (screenPixelRatio <= .33) {
zoomLevel = "-5.5";
} else if (screenPixelRatio <= .40) {
zoomLevel = "-5";
} else if (screenPixelRatio <= .50) {
zoomLevel = "-4";
} else if (screenPixelRatio <= .67) {
zoomLevel = "-3";
} else if (screenPixelRatio <= .75) {
zoomLevel = "-2";
} else if (screenPixelRatio <= .85) {
zoomLevel = "-1.5";
} else if (screenPixelRatio <= .98) {
zoomLevel = "-1";
} else if (screenPixelRatio <= 1.03) {
zoomLevel = "0";
} else if (screenPixelRatio <= 1.12) {
zoomLevel = "1";
} else if (screenPixelRatio <= 1.2) {
zoomLevel = "1.5";
} else if (screenPixelRatio <= 1.3) {
zoomLevel = "2";
} else if (screenPixelRatio <= 1.4) {
zoomLevel = "2.5";
} else if (screenPixelRatio <= 1.5) {
zoomLevel = "3";
} else if (screenPixelRatio <= 1.6) {
zoomLevel = "3.3";
} else if (screenPixelRatio <= 1.7) {
zoomLevel = "3.7";
} else if (screenPixelRatio <= 1.8) {
zoomLevel = "4";
} else if (screenPixelRatio <= 1.9) {
zoomLevel = "4.5";
} else if (screenPixelRatio <= 2) {
zoomLevel = "5";
} else if (screenPixelRatio <= 2.1) {
zoomLevel = "5.2";
} else if (screenPixelRatio <= 2.2) {
zoomLevel = "5.4";
} else if (screenPixelRatio <= 2.3) {
zoomLevel = "5.6";
} else if (screenPixelRatio <= 2.4) {
zoomLevel = "5.8";
} else if (screenPixelRatio <= 2.5) {
zoomLevel = "6";
} else if (screenPixelRatio <= 2.6) {
zoomLevel = "6.2";
} else if (screenPixelRatio <= 2.7) {
zoomLevel = "6.4";
} else if (screenPixelRatio <= 2.8) {
zoomLevel = "6.6";
} else if (screenPixelRatio <= 2.9) {
zoomLevel = "6.8";
} else if (screenPixelRatio <= 3) {
zoomLevel = "7";
} else if (screenPixelRatio <= 3.1) {
zoomLevel = "7.1";
} else if (screenPixelRatio <= 3.2) {
zoomLevel = "7.2";
} else if (screenPixelRatio <= 3.3) {
zoomLevel = "7.3";
} else if (screenPixelRatio <= 3.4) {
zoomLevel = "7.4";
} else if (screenPixelRatio <= 3.5) {
zoomLevel = "7.5";
} else if (screenPixelRatio <= 3.6) {
zoomLevel = "7.6";
} else if (screenPixelRatio <= 3.7) {
zoomLevel = "7.7";
} else if (screenPixelRatio <= 3.8) {
zoomLevel = "7.8";
} else if (screenPixelRatio <= 3.9) {
zoomLevel = "7.9";
} else if (screenPixelRatio <= 4) {
zoomLevel = "8";
} else if (screenPixelRatio <= 4.1) {
zoomLevel = "8.1";
} else if (screenPixelRatio <= 4.2) {
zoomLevel = "8.2";
} else if (screenPixelRatio <= 4.3) {
zoomLevel = "8.3";
} else if (screenPixelRatio <= 4.4) {
zoomLevel = "8.4";
} else if (screenPixelRatio <= 4.5) {
zoomLevel = "8.5";
} else if (screenPixelRatio <= 4.6) {
zoomLevel = "8.6";
} else if (screenPixelRatio <= 4.7) {
zoomLevel = "8.7";
} else if (screenPixelRatio <= 4.8) {
zoomLevel = "8.8";
} else if (screenPixelRatio <= 4.9) {
zoomLevel = "8.9";
} else if (screenPixelRatio <= 5) {
zoomLevel = "9";
}else {
zoomLevel = "unknown";
}
return zoomLevel;
};
zoom = ( window.outerWidth - 10 ) / window.innerWidth
var browserZoomLevel = Math.round(window.devicePixelRatio * 100);
$(window).resize(function() {
// your code
});
window.addEventListener("mousemove", function(event) {
// handle event
});
event.clientX, event.clientY, event.screenX, event.screenY
ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;
devicePixelRatio = 1.5
deviceScale = 144
deviceScale / standardPixelPerInch = 1.5
devicePixelRatio / (deviceScale / standardPixelPerInch) = 1
var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
private pixelRatio() {
const styleString = "(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)";
const chromeRatio = (Math.round((this.window.outerWidth / this.window.innerWidth)*100) / 100);
const otherRatio = (Math.round(window.devicePixelRatio * 100) / 100);
const resizeValue = (this.isChrome()) ? chromeRatio : otherRatio;
return resizeValue || (this.window.matchMedia && this.window.matchMedia(styleString).matches ? 2 : 1) || 1;
}
private isChrome():boolean {
return (!!this.window.chrome && !(!!this.window.opera || this.window.navigator.userAgent.indexOf(' Opera') >= 0))
}
private chrome() {
const zoomChrome = Math.round(((this.window.outerWidth) / this.window.innerWidth)*100) / 100;
return {
zoom: zoomChrome,
devicePxPerCssPx: zoomChrome1 * this.pixelRatio()
};
}
window.visualViewport.scale;
alert(Math.round(window.devicePixelRatio * 100));