Can I change the viewport meta tag in mobile safari on the fly?

by

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">');

More Related Contents:

  1. How to get the browser viewport dimensions?
  2. Get viewport/window height in ReactJS
  3. Mobile Safari Autofocus text field
  4. Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)
  5. iOS 8 removed “minimal-ui” viewport property, are there other “soft fullscreen” solutions?
  6. HTML5 Canvas camera/viewport – how to actually do it?
  7. Copy to clipboard using Javascript in iOS
  8. Simplest way to detect a pinch
  9. Programmatically focus on next input field in mobile safari
  10. iScroll 4 not working with form element iPhone Safari and Android browser
  11. Is there any way to use window.onbeforeunload on Mobile Safari for iOS devices?
  12. programmatically changing webkit-transformation values in animation rules
  13. How to detect in iOS webapp when switching back to Safari from background?
  14. Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)
  15. Strange behavior of select/dropdown’s onchange() JS event when using ‘Next’ on Mobile Safari Dropdown list item select box
  16. What is viewport in HTML.
  17. How to check if an element is in the view of the user with jquery
  18. Total canvas memory use exceeds the maximum limit (Safari 12)
  19. Find the exact height and width of the viewport in a cross-browser way
  20. Cancel single image request in html5 browsers
  21. ‘pageshow’ is not received when pressing “back” button on Safari on *IPad”
  22. Determine if user navigated from mobile Safari
  23. Javascript date parsing on Iphone
  24. No sound on iOS 6 Web Audio API
  25. How to open Safari from a WebApp in iOS 7
  26. Detect if page is loaded inside WKWebView in JavaScript
  27. Is it possible, in JavaScript, to detect when the screen is turned off in the Android & iOS browsers
  28. Handling standby on iPad using Javascript
  29. EXIF Orientation Issue in Safari Mobile
  30. Is there an alternative method to use onbeforeunload in mobile safari?

Leave a Comment