Menu
I have a web form that uses jQuery to submit a search. The form itself doesn't fire the submit event because I catch that and drop it (this is all part of a much larger and more complex form and I'm using progressive enhancement to add this functionality).
On the iPhone, the browser automatically zooms in to my search input as soon as it is focused. On an "enter" keyup event, the search is executed via javascript, and I blur the input which dismisses the on screen iPhone keyboard, but the browser stays zoomed in to the input area.
Is there a way to programatically trigger zooming out again back to the initial viewport area via javascript?
EDIT: there's no redirect on search execution which would normally reset the viewport when the new page loads - everything happens on one page here.
268
Select “Accessibility“. Choose “Vision“. Scroll down and select “Magnification gestures“. Set the slider at the upper-right part of the screen to “Off“.
If you enlarge the field by increasing all dimensions by 16 / 12 = 133.33%, then reduce using scale() by 12 / 16 = 75%, the input field will have the correct visual size (and font size), and there will be no zoom on focus.
Your iPhone is stuck zoomed in because an accessibility feature called Zoom is turned on in Settings. Zoom makes it easier for people with low vision to use their iPhones by allowing them to zoom in on certain parts of the screen.
If the input's font-size is a minimum of 16px the zoom in will not be triggered to begin with.
132
I've used the following successfully.
$('input, select, textarea').on('focus blur', function(event) { $('meta[name=viewport]').attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1)); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <meta name="viewport" content="width=device-width,initial-scale=1" /> </head> <body> <input id="input" type="text" placeholder="Type here..." /> </body> 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
