Reset zoom on page change?
During the development of our mobile website, we came a cross a problem with the zoom of the mobile devices: If the user zooms in and then changes the page by clicking on a link, the website remains zoomed in.
After search the web for a solution, I found this script. Using the way to disable and reenable the zoom from that script helped to counter the problem in Chrome and Opera on Android, however for Firefox on Android and Safari on iOS it remained unchanged.
I have however not found a diffrent way to influence the zoom level of the browser.
Did I overlook something? Does anyone have an idea as to what might help?
The jQuery Mobile version used is 1.4.0-beta.1.
Here some more specific code:
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <script type="text/javascript">
var meta = document.querySelector( "meta[name=viewport]" ),
initialContent = meta.getAttribute( "content" ),
disabledZoom = initialContent + ", maximum-scale=1.0, minimum-scale=1.0",
enabledZoom = initialContent + ", maximum-scale=10.0, minimum-scale=1.0";
function restoreZoom(){
meta.setAttribute( "content", enabledZoom );
}
function disableZoom(){
meta.setAttribute( "content", disabledZoom );
}
</script>
- <script type="text/javascript">
$(document).on("pagechange", restoreZoom);
$(document).on("pagebeforehide", disableZoom);
</script>