Menu
I looking for options on how to track user zooming and panning on a page when viewed in Safari on an iPhone. Safari exposes move and gesture events, so theoretically I can keep a running tally of pan and zoom operations, but that seems like overkill since the browser must track that internally.
Is this information exposed through the Document Object Model?
361
Make all content larger: Choose Safari > Settings for [website] and choose an option from the Page Zoom pop-up menu, or choose View > Zoom In. You can also pinch open on a trackpad that supports gestures. Safari remembers the zoom level when you return to the website (unless you pinch open to zoom).
Adjust the magnification: Double-tap the screen with three fingers (without lifting your fingers after the second tap), then drag up or down. Or triple-tap with three fingers, then drag the Zoom Level slider.
By default, Chrome sets the zoom level to 100%. To manually adjust the settings, use the Ctrl key and “+” or “-” combos to increase or decrease the page magnification.
Sounds like you have system zoom enabled. You can disable it from System Settings > Accessibility > Zoom.
When you zoom in, window.innerWidth is adjusted, but document.documentElement.clientWidth is not, therefore:
var zoom = document.documentElement.clientWidth / window.innerWidth; (I've tested iOS4, without viewport <meta>).
However, I wouldn't rely on it for anything important. DOM viewport sizes/pixel sizes in mobile browsers are a complete mess.
166
On Mobile Safari and Android, here is an accurate way to measure how much the page has been zoomed.
Try it here: http://jsbin.com/cobucu/3 - change zoom then click measure.
Technique is to add a top level div:
<body> <div id=measurer style="position:absolute;width:100%"></div> and use the calculation:
function getZoom(){ return document.getElementById('measurer').offsetWidth / window.innerWidth; } The only problem is finding a tidy way to detect that the user has changed zoom (pinch, double tap, etc). Options:
PS: Windows Phone needs a different solution (pinch-zoom doesn't change the viewport - pinch-zoom on Windows has its own separate viewport that is not visible to javascript).
Edit: Android Visual Viewport resize and scroll events may help? See https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport#Events
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
