How to detect page zoom level in all modern browsers?
- by understack
How can I detect page zoom level in all modern browsers? While this thread tells how to do it in IE7 and IE8, I can't find good solution for FF, Safari and Chrome. For FF one of the suggested solution
FF stores page zoom level for future. So on first page load would I be able to get zoom level? Somewhere I read it works if you're changing zoom level on that page after its loaded.
Is there a way to trap 'zoom' event?
I need this because some of my calculations are based on no of pixels and they get changed on Zoom.
Thanks.
Modified sample given by tfl. This would alert different height based on zoom level.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
<title></title>
</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>
<div>
<button onclick="alert($('#xy').height());">Show</button>
</div>
</body>
</html>
