43

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
bbodien
  • 1,062
  • 2
  • 10
  • 20
  • There seems to be several solutions. Check the url below:- [enter link description here][1] [1]: http://stackoverflow.com/questions/24310074/disable-input-auto-zooming-on-mobile-devices – danjackknife Apr 07 '15 at 22:01

5 Answers5

42

If the input's font-size is a minimum of 16px the zoom in will not be triggered to begin with.

whistler
  • 767
  • 7
  • 11
9

Do you need or want to allow people to zoom at all? If not, have you set this meta tag in your head?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

As far as I'm aware, that will stop the zoom issue in the first instance.

Michael Giovanni Pumo
  • 14,338
  • 18
  • 91
  • 140
  • 4
    This is an incredibly bad idea if you care about accessibility. – Joshua Russell Dec 12 '16 at 05:57
  • It's not bad for accessibility in and of itself. It's bad for accessibility if you misuse this where you don't need to. In some instances this is a very useful and important feature. In any case, I don't think you can prevent zoom in iOS any longer. – Michael Giovanni Pumo Feb 06 '18 at 12:28
  • 2
    I have to disagree. As a user I don't want to be restricted by max scale level should I need to zoom for better text legibility. This meta completely disables that ability. This topic has been discussed 1000 times on the internet and the general consensus is to not disable scaling. Apple have also disabled this meta tag in iOS10 — https://medium.com/@johan_ronsse/re-apple-disabling-maximum-scale-behavior-on-responsive-websites-in-ios10-17bc7b0f27c0 – Joshua Russell Feb 26 '18 at 05:09
  • Apple will disregard maximum-scale and user-scalable sind iOS10 So even it this solution would be a11l friendly - it wont work any more. https://medium.com/@johan_ronsse/re-apple-disabling-maximum-scale-behavior-on-responsive-websites-in-ios10-17bc7b0f27c0 – jvoigt May 29 '19 at 14:42
  • 2
    Yes, 99% of the time people should be able to zoom but imagine you had a web game that had complex gestures. I could imagine it being frustrating or necessitate a need for verbose JavaScript to get around it. That’s not good for anybody. Anyhow, it’s pointless if Apple are removing it but just wanted to add my reasoning as to why it may not always be “bad”. – Michael Giovanni Pumo May 29 '19 at 19:49
9

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>
Jens A. Koch
  • 39,862
  • 13
  • 113
  • 141
Shayna Symons
  • 451
  • 3
  • 7
  • 11
    Thanks. It feels horrible that we even have to do this... Why would a user want to remain zoomed in after filling out an input?! – Snowman Feb 23 '16 at 12:30
  • Doesn't this leave in the new viewport after an input is clicked? If that's the approach, why not just use that viewport to start with? – Goose Apr 15 '16 at 20:00
  • To clarify my previous comment, won't this prevent zoom in on the next input entered? – Goose Apr 15 '16 at 20:21
  • no, because it sets the zoom to 10 on 'focus' events. that's why she checks the event type with a ternary statement before assigning the zoom level. – Magenta Nova Aug 11 '17 at 14:03
  • This did not work for me on Mobile Safari 14 – Adam Libuša Jan 20 '21 at 14:16
3

.css

input[type=search] {
    font-size: max(1em, 16px);
}

as mentioned in other answers, using the 16px font size

  1. prevents the browser from zooming in the first place
  2. avoids using maximum-scale in the meta tag which prevents zooming in other browsers
Nathan Sutherland
  • 1,191
  • 7
  • 9
1

the focus and blur event above did not work for me, to ensure that safari zooms out on blur and that it resets the "maximum-scale" to 10 afterwards I did this:

the function needs to be called on both blur and focus events, as the onFocus event will clear the timeout. This is in case the user goes directly from one input field into another.

let iosZoom10Timer: any = null;
let iosZoom1Timer: any = null;
function handleZoomOnIOS(e) {

    if (e.type === 'blur') {
        iosZoom1Timer = setTimeout(
            function () {
                document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width,initial-scale=1,maximum-scale=1');

                iosZoom10Timer = setTimeout(
                    function () {
                        document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width,initial-scale=1,maximum-scale=10');
                    }, 100);
            }, 100);

    }
    else if (e.type === 'focus') {
        clearTimeout(iosZoom1Timer);
    }
}
Nicklas Lid
  • 66
  • 3