如何在所有现代浏览器中检测页面缩放级别？虽然这个thread告诉我如何在IE7和IE8中做到这一点，但我找不到一个好的跨浏览器解决方案。
Firefox存储页面缩放级别以供将来访问。在第一页加载时，我能够获得缩放级别吗？在页面加载后发生缩放变化时，我在某处读到它。
有没有办法捕获'zoom'事件？
我需要这个，因为我的一些计算是基于像素的，并且在缩放时它们可能会波动。
由@tfl
提供的修改后的样本此页面在缩放时提醒不同的高度值。 [jsFiddle]
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
</head>
<body>
<div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis.</div>
<button onclick="alert($('#xy').height());">Show</button>
</body>
</html>
答案 0 :(得分：265)
现在它比第一次提出这个问题时更加混乱。通过阅读我能找到的所有回复和博客文章，这里有一个摘要。我还设置了this page to test all these methods of measuring the zoom level。
编辑（2011-12-12）：我添加了一个可以克隆的项目：https://github.com/tombigel/detect-zoom
screen.deviceXDPI / screen.logicalXDPI（或者，相对于默认缩放的缩放级别，screen.systemXDPI / screen.logicalXDPI）var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;（感谢this example或this answer）screen.width /媒体查询屏幕宽度（见下文）（利用screen.width使用设备像素但MQ宽度使用CSS像素的事实 - 谢谢Quirksmode widths）-webkit-text-size-adjust:none衡量div的首选大小。document.width / jQuery(document).width()（感谢Dirk van Oosterbosch above）。要获得设备像素的比率（而不是相对于默认缩放），请乘以window.devicePixelRatio。parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth（来自this answer）document.documentElement.offsetWidth / position:fixed; width:100% div的宽度。 from here（Quirksmode's widths table表示这是一个错误; innerWidth应该是CSS px）。我们使用position：fixed元素来获取视口的宽度，包括滚动条所在的空间; document.documentElement.clientWidth排除此宽度。这在2011年的某个时候被打破了;我知道无法再在Opera中获得缩放级别。这是Firefox 4的二进制搜索，因为我不知道它暴露的任何变量：
<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>
答案 1 :(得分：45)
对我来说，对于Chrome / Webkit，document.width / jQuery(document).width()无效。当我将窗口缩小并放大到我的网站以便出现水平滚动条时，document.width / jQuery(document).width()在默认缩放时不等于1。这是因为document.width包括视口外部文档的一部分。
使用window.innerWidth和window.outerWidth有效。出于某些原因，在Chrome中，outerWidth以屏幕像素为单位，innerWidth以css像素为单位进行测量。
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";
}
答案 2 :(得分：43)
你可以尝试
var browserZoomLevel = Math.round(window.devicePixelRatio * 100);
这将为您提供浏览器缩放百分比级别。
要捕捉缩放事件，您可以使用
$(window).resize(function() {
// your code
});
答案 3 :(得分：16)
我的同事和我使用了来自https://github.com/tombigel/detect-zoom的脚本。此外，我们还动态创建了一个svg元素并检查其currentScale属性。它适用于Chrome，也可能是大多数浏览器。在FF上，必须关闭“仅缩放文本”功能。在大多数浏览器上，SVG为supported。在撰写本文时，在IE10，FF19和Chrome28上进行了测试。
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);
答案 4 :(得分：11)
我发现这篇文章非常有帮助。非常感谢yonran。我想在实现他提供的一些技术时传递一些额外的学习知识。在FF6和Chrome 9中，增加了对JS媒体查询的支持，这可以大大简化确定FF缩放所需的媒体查询方法。请参阅MDN here上的文档。出于我的目的，我只需要检测浏览器是否放大或缩小，我不需要实际的缩放系数。我能用一行JavaScript得到答案：
var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;
将此与IE8 +和Webkit解决方案（也是单行）相结合，我能够通过几行代码检测绝大多数浏览器上的缩放。
答案 5 :(得分：11)
zoom = ( window.outerWidth - 10 ) / window.innerWidth
这就是你所需要的一切。
答案 6 :(得分：6)
截至2016年1月，我有一个解决方案。经过测试，可在Chrome，Firefox和MS Edge浏览器中使用。
原理如下。收集相距很远的2个MouseEvent点。每个鼠标事件都带有屏幕和文档坐标。测量两个坐标系中2个点之间的距离。虽然由于浏览器家具而在坐标系之间存在可变的固定偏移，但如果页面未缩放，则点之间的距离应该相同。指定＆＃34;远离的原因＆＃34; （我把它设为12像素）是可以检测到的小变焦（例如90％或110％）。
参考： https://developer.mozilla.org/en/docs/Web/Events/mousemove
步骤：
添加鼠标移动侦听器
window.addEventListener("mousemove", function(event) {
// handle event
});
从鼠标事件中捕获4个测量值：
event.clientX, event.clientY, event.screenX, event.screenY
测量客户端系统中2个点之间的距离d_c
测量屏幕系统中2个点之间的距离d_s
如果d_c！= d_s，则应用缩放。两者之间的差异告诉你缩放量。
N.B。只进行距离计算很少，例如当您可以对远离前一个鼠标事件的新鼠标事件进行采样时。
限制：假设用户将鼠标移动至少一点，并且在此之前缩放是不可知的。
答案 7 :(得分：3)
在Internet Explorer 7,8＆amp; 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中，缩放不存在，因此无需检查缩放。
答案 8 :(得分：3)
这对基于webkit的浏览器（Chrome，Safari）非常有用：
function isZoomed() {
var width, mediaQuery;
width = document.body.clientWidth;
mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';
return !window.matchMedia(mediaQuery).matches;
}
似乎在Firefox中不起作用。
这也适用于WebKit：
var zoomLevel = document.width / document.body.clientWidth;
答案 9 :(得分：3)
我想出的是：
1）使用position:fixed（ id = zoomdiv ）制作<div> width:100%
2）页面加载时：
zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth
对于ctrl+和ctrl-缩放，它对我有用。
或者我可以将该行添加到$(window).onresize()事件以获得有效缩放级别
代码：
<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>
P.S。 ：这是我的第一篇文章，请原谅任何错误
答案 10 :(得分：2)
尝试
alert(Math.round(window.devicePixelRatio * 100));
答案 11 :(得分：2)
在移动设备（使用Chrome for Android或Opera Mobile）上，您可以通过 window.visualViewport.scale 检测缩放。 https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
在Safari上检测： document.documentElement.clientWidth / window.innerWidth （如果设备没有缩放，则返回1）。
答案 12 :(得分：2)
基本上，我们有：
window.devicePixelRatio考虑了浏览器级缩放*以及系统缩放/像素密度
* - 不考虑Mac / Safari缩放级别vw / vh CSS单位resize事件，在缩放级别更改时触发，会导致窗口更改的有效大小对于普通用户体验应该足够了。如果您需要检测缩放级别，这可能是不良UI设计的标志。
音高变焦更难跟踪，目前不予考虑。
答案 13 :(得分：1)
您的计算仍然基于许多CSS像素。它们现在在屏幕上的大小不同。这就是整页缩放的重点。
您希望在192dpi设备上的浏览器上发生什么，因此通常会为图像中的每个像素显示四个设备像素？在50％变焦时，此设备现在在一个设备像素中显示一个图像像素。
答案 14 :(得分：1)
答案 15 :(得分：1)
在Chrome上
var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
答案 16 :(得分：0)
我有仅限移动设备的此解决方案（使用Android测试）：
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());
});
如果你想在捏移动后立即进行缩放，你可能需要设置一点暂停，因为渲染延迟（但我不确定，因为我没有测试它）。 / p>
答案 17 :(得分：0)
这是针对 Chrome ，在user800583 answer ...
之后我花了几个小时来解决这个问题，并没有找到更好的方法，但是：
window.outerWidth/window.innerWidth，如果不是，则比例似乎为(window.outerWidth-16)/window.innerWidth，但第一种情况可以由第二种情况接近。所以我来到了以下......
但是这种方法有局限性：例如，如果您使用应用程序窗口播放手风琴（快速放大并缩小窗口宽度），那么虽然缩放没有改变，但是缩放级别之间会出现间隙（可能是外部宽度和innerWidth并未在同一时间完全更新。）
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 ]
);
答案 18 :(得分：0)
此答案基于有关device10ixelRatio对user1080381答案错误回复的评论。
我发现在使用桌面，Surface Pro 3和Surface Pro 4时，此命令在某些情况下也会错误地返回。
我发现它在我的桌面上运行，但SP3和SP4提供了彼此和桌面不同的数字。
我注意到SP3的回放率是我预期的缩放级别的1.5倍。当我查看显示设置时，SP3实际设置为150％，而不是我桌面上的100％。
因此，注释的解决方案应该是将返回的缩放级别除以您当前所使用的机器的比例。
通过执行以下操作，我能够在Windows设置中获得比例：
ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;
对于我的SP3，这就是这段代码100％缩放的方式：
devicePixelRatio = 1.5
deviceScale = 144
deviceScale / standardPixelPerInch = 1.5
devicePixelRatio / (deviceScale / standardPixelPerInch) = 1
在user1080381的原始答案中乘以100会得到100（％）的缩放。
答案 19 :(得分：0)
具有当前可运行的功能，但是仍需要通过浏览器进行分隔。 已在Chrome（75）和Safari（11.1）上成功测试（到目前为止，尚未找到用于FF的方法）。 它还可以在视网膜显示屏上获得正确的缩放值，并在调整大小事件时触发计算。
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()
};
}
答案 20 :(得分：0)
没有为IE测试此内容，但是如果您使用
创建元素elem
min-width: 100%
然后
window.document.width / elem.clientWidth
会为您提供浏览器缩放级别（包括document.body.style.zoom因子）。
答案 21 :(得分：-1)
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;
};
答案 22 :(得分：-1)
FireFox 16+解决方法纯粹使用JavaScript查找DPPX（缩放级别）：
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);
答案 23 :(得分：-1)
问题在于所使用的显示器类型，4k显示器与标准显示器。 Chrome是最明智的，能够通过使用window.devicePixelRatio告诉我们缩放级别是什么，显然它可以告诉我们像素密度是多少，并报告相同的数字。
其他浏览器，不是那么多。 IE和Edge可能是最差的，因为它们处理缩放级别的方式大不相同。要在4k显示器上获得相同尺寸的文本，您必须在标准显示器上选择200％而不是100％。
截至2018年5月，我需要检测一些最流行的浏览器，Chrome，Firefox和IE11的缩放级别。我告诉我缩放百分比是多少。对于IE，即使对于实际上为200％的4k显示器，它也会报告100％，但文本大小实际上是相同的。
这是一个小提琴：https://jsfiddle.net/ae1hdogr/
如果有人想关注其他浏览器并更新小提琴，那么请这样做。我的主要目标是覆盖这3个浏览器，以检测人们是否使用大于100％的缩放系数来使用我的Web应用程序并显示建议放大器缩放系数的通知。
答案 24 :(得分：-1)
这个问题是像年龄一样发布的，但是今天当我正在寻找相同的答案“如何检测放大和缩小事件”时，我找不到一个适合所有浏览器的答案。
就像现在一样：对于Firefox / Chrome / IE8和IE9，放大和缩小会触发window.resize事件。 这可以使用以下方式捕获：
$(window).resize(function() {
//YOUR CODE.
});
答案 25 :(得分：-1)
这可能会或可能不会对任何人有所帮助，但无论我尝试了什么Css技巧，我都有一个无法正确居中的页面，所以我写了一个JQuery文件调用中心页面：
浏览器的缩放级别出现问题，根据您是100％，125％，150％等，页面会发生变化。
以下代码位于名为centerpage.js的JQuery文件中。
从我的页面我不得不链接到JQuery和这个文件才能使它工作，即使我的母版页已经有了一个指向JQuery的链接。
<title>Home Page.</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/centerpage.js"></script>
centerpage.js：
// 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);
}
}
答案 26 :(得分：-1)
这里没有改变！：
<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）
答案 27 :(得分：-3)
@media (min-width: 500px){
/* css here */
}
或
@media (max-width: 500px){
/* css here */
}