如何在所有现代浏览器中检测页面缩放级别?尽管此线程说明了如何在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>
这是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>
> 如何在所有现代浏览器中检测页面缩放级别?虽然这个线程告诉如何在IE7和IE8中做到这一点,但我找不到一个好的跨浏览器解决方案。 Firefox存储页面缩放级别以备将来访问。在第一页加载,我可以得到缩放级别吗?在我读到的某个地方,当页面加载后发生缩放更改时,它起作用。 是否有方法捕获事件? 我需要这个,因为我的一些计算是基于像素的,他们可能波动时缩放。 @TFL给出的修改示例 当缩放时,此页会对
问题内容: 如何在页面加载时提高浏览器缩放级别? ,最近我得到了增加宽度的任务,就像我们按Firefox一样并且浏览器缩放级别增加时,是否有任何方法可以在所有加载页面的浏览器中自动执行此操作。 问题答案: 我个人认为这是个坏主意。您可以设计您的网站,使其轻松地进行扩展(使用适当的CSS / HTML技术并不难),或者仅允许用户执行他们想要的操作(也许他们已经缩放了浏览器或使用了低分辨率)。通常,您
问题内容: 我需要在我的网站上创建2个按钮,以更改浏览器的缩放级别(+)(-)。由于图像尺寸和布局问题,我要求浏览器缩放而不是CSS缩放。 好吧,这有可能吗?我听到了相互矛盾的报道。 问题答案: 我会说在大多数浏览器中是不可能的,至少没有一些附加插件。在任何情况下,随着实现的变化,我都将尽量避免依赖浏览器的缩放(某些浏览器仅缩放字体,其他浏览器也缩放图像等)。除非您不太在乎用户体验。 如果需要更可
问题内容: 如何使用JavaScript确定确切的浏览器和版本? 问题答案: 顾名思义,这将告诉您浏览器提供的名称和版本号。 当您在多个浏览器上测试新代码时,它对于对测试结果和错误结果进行排序非常方便。
问题内容: 我一直在寻找可以让我检测访问该网站的用户是否使用Firefox3或4的代码。我发现的所有代码都是用于检测浏览器类型而不是版本的代码。 如何检测这样的浏览器版本? 问题答案: 您可以看到浏览器说的内容,并将该信息用于记录或测试多个浏览器。
问题内容: 当用户更改页面缩放时,是否可以使用JavaScript检测?我只是想捕获一个“缩放”事件并对其进行响应(类似于window.onresize事件)。 谢谢。 问题答案: 无法主动检测是否有变焦。我在这里找到了如何尝试实现它的好方法。 我发现了两种检测缩放级别的方法。检测缩放级别变化的一种方法取决于不缩放百分比值的事实。百分比值是相对于视口宽度的,因此不受页面缩放的影响。如果您插入两个元