如何在所有现代浏览器中检测页面缩放级别?

如何在所有现代浏览器中检测页面缩放级别?

  1. 如何在所有现代浏览器中检测页面缩放级别?而这个螺纹在IE7和IE8中,我无法找到一个很好的跨浏览器解决方案。

  2. Firefox存储页面缩放级别以供将来访问。在第一页加载时,我能获得缩放级别吗?在我读到的某个地方,当发生缩放更改时,它会工作页面被加载。

  3. 有没有办法把'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>


富国沪深
浏览 547回答 3
3回答

慕勒3428872

对我来说,对于Chrome/Webkit,document.width / jQuery(document).width()不起作用。当我把窗户变小,放大到我的网站上时,就出现了水平滚动条,document.width / jQuery(document).width()在默认缩放时不等于1。这是因为document.width包括视图之外的部分文档。使用window.innerWidth和window.outerWidth起作用了。由于某些原因,在Chrome中,外部宽度是用屏幕像素来测量的,而内部宽度是用CSS像素来测量的。var&nbsp;screenCssPixelRatio&nbsp;=&nbsp;(window.outerWidth&nbsp;-&nbsp;8)&nbsp;/&nbsp;window.innerWidth;if&nbsp;(screenCssPixelRatio&nbsp;>=&nbsp;.46&nbsp;&&&nbsp;screenCssPixelRatio&nbsp;<=&nbsp;.54)&nbsp;{ &nbsp;&nbsp;zoomLevel&nbsp;=&nbsp;"-4";}&nbsp;else&nbsp;if&nbsp;(screenCssPixelRatio&nbsp;<=&nbsp;.64)&nbsp;{ &nbsp;&nbsp;zoomLevel&nbsp;=&nbsp;"-3";}&nbsp;else&nbsp;if&nbsp;(screenCssPixelRatio&nbsp;<=&nbsp;.76)&nbsp;{ &nbsp;&nbsp;zoomLevel&nbsp;=&nbsp;"-2";}&nbsp;else&nbsp;if&nbsp;(screenCssPixelRatio&nbsp;<=&nbsp;.92)&nbsp;{ &nbsp;&nbsp;zoomLevel&nbsp;=&nbsp;"-1";}&nbsp;else&nbsp;if&nbsp;(screenCssPixelRatio&nbsp;<=&nbsp;1.10)&nbsp;{ &nbsp;&nbsp;zoomLevel&nbsp;=&nbsp;"0";}&nbsp;else&nbsp;if&nbsp;(screenCssPixelRatio&nbsp;<=&nbsp;1.32)&nbsp;{ &nbsp;&nbsp;zoomLevel&nbsp;=&nbsp;"1";}&nbsp;else&nbsp;if&nbsp;(screenCssPixelRatio&nbsp;<=&nbsp;1.58)&nbsp;{ &nbsp;&nbsp;zoomLevel&nbsp;=&nbsp;"2";}&nbsp;else&nbsp;if&nbsp;(screenCssPixelRatio&nbsp;<=&nbsp;1.90)&nbsp;{ &nbsp;&nbsp;zoomLevel&nbsp;=&nbsp;"3";}&nbsp;else&nbsp;if&nbsp;(screenCssPixelRatio&nbsp;<=&nbsp;2.28)&nbsp;{ &nbsp;&nbsp;zoomLevel&nbsp;=&nbsp;"4";}&nbsp;else&nbsp;if&nbsp;(screenCssPixelRatio&nbsp;<=&nbsp;2.70)&nbsp;{ &nbsp;&nbsp;zoomLevel&nbsp;=&nbsp;"5";}&nbsp;else&nbsp;{ &nbsp;&nbsp;zoomLevel&nbsp;=&nbsp;"unknown";}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript