Menu
I have an AJAX app built for mobile Safari browser that needs to display different types of content.
For some content, I need user-scalable=1 and for other ones, I need user-scalable=0.
Is there a way to modify the value of the content attribute without refreshing the page?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
577
To configure a mobile viewport, all you have to do is add a meta viewport tag to any and all webpages you would like to be mobile-friendly. To do this, simply copy the HTML snippet below and paste it in the header of your site.
Generally, meta elements (including viewport) should be placed in the document's <head> . CSS rules should either be added to a CSS stylesheet and referenced with a <link> element or, if you're not using stylesheets for some reason, in a <style> element (also in the document's <head> ).
The viewport meta tag tells the browser that the width of the screen should be considered the "Full Width" of the page. Meaning no matter the width of the device you are on, whether on desktop or mobile. the website will follow the width of the device the user is on.
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. The user-scalable attribute defines whether users can scale (zoom) the page content on mobile.
I realize this is a little old, but, yes it can be done. Some javascript to get you started:
viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'); Just change the parts you need and Mobile Safari will respect the new settings.
Update:
If you don't already have the meta viewport tag in the source, you can append it directly with something like this:
var metaTag=document.createElement('meta'); metaTag.name = "viewport" metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" document.getElementsByTagName('head')[0].appendChild(metaTag); Or if you're using jQuery:
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">'); in your <head>
<meta id="viewport" name="viewport" content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" /> somewhere in your javascript
document.getElementById("viewport").setAttribute("content", "initial-scale=0.5; maximum-scale=1.0; user-scalable=0;"); ... but good luck with tweaking it for your device, fiddling for hours... and i'm still not there!
source
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
