Prevent Iphone From Zooming Form?

The code: Home About Services &l Solution 1: This can be prevented by setting font-size:16px to all input fields. Solution 2: UPDATE: This method no longer works on iOS 10.

---

It depend from the Viewport, you can disable it in this way: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> Copy add user-scalable=0 and it should work on your inputs as well. Solution 3: For iOS, you can avoid zooming of input elements by simply allocating a font size to them that's considered sufficient by the OS (>=16px), thus avoiding the need to zoom, e.g.: input, select, textarea { font-size: 16px; } Copy It's a solution also utilized by various frameworks and allows you to avoid the use of a meta tag. Solution 4: This might be helpful to look at: Disable Auto Zoom in Input "Text" tag - Safari on iPhone You'd basically need to capture the event of tapping on a form element, then not run the default iOS action of zooming in, but still allowing it to zoom for the rest of the page. Edit: The link mentions, 2) You can dynamically change the META viewport tag using javascript (see Enable/disable zoom on iPhone safari with Javascript?) To elaborate: Viewport meta tag is set to allow zooming User taps on form element, changes meta tag to disable zooming Upon pressing done, viewport is changed to allow zoom And if you can't change the tag when clicking on a form element, put a div that mimics the form element that when you press it, it changes the tag, then calls the input. Solution 5: The most up voted answer to set the font-size does not work for me. Using javascript to identify the client together with the meta tags in the answers here, we can prevent the zooming behavior of iPhone on input focus while otherwise keeping the zooming functionality intact. $(document).ready(function () { if (/iPhone/.test(navigator.userAgent) && !window.MSStream) { $(document).on("focus", "input, textarea, select", function() { $('meta[name=viewport]').remove(); $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">'); }); $(document).on("blur", "input, textarea, select", function() { $('meta[name=viewport]').remove(); $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">'); }); } }); Copy It seems like we have to replace the meta tag with new values on the blur-event, just to remove it does not seem to trigger an updated behavior. Note that the UI is still initializing the zoom, but it quickly zooms back out again. I believe this is acceptable and iPhone users must already be accustomed to that the browser is having some dynamic zooming going on anyway in applicable scenarios. Share Post a Comment for "Prevent Iphone From Zooming Form?" Top Question Firefox, Chrome, Safari Have Grey Background For Mp4 Html5 Video Any video (that I can make) with a white background becomes… Red Border Still Appears On Inputs After Resetting An HTML 5 Form Firefox I have an HTML 5 form! Great, I'm excited! I decide to … Svg Animation And Firefox I'm struggle with SVG animation drawing, which is work … Form To Iframe Submission - How Do You Reset The Form After File Upload? I have a form that submits the results to an iframe. The su… How To Hide/show Tabs Using Jquery I have four tabs.On loading only the first tab is opened an… How To Save Html5 Geolocation Data To Python Django Admin? Is it possible to save the javascript html5 geolocation lat… How To Limit The Html Table Records In Each Page I am populating a table in my jsp which has more than 20 re… How To Display A Python String As Html In Jupyter Notebook In IPython notebook, I used to be able to display a python … How To Add Placeholder Field?

I've been trying to add placeholder in input type='…