Mobile devices are zooming in when focusing inputs because inputs use less than a 16px font-size

[lloydowen]

Hey,

Not really a bug as such, but a design choice. Safari for iOS (and other browsers) will natively try and zoom the viewport if the font size of an input is less than 16px. Flux by default has a small input text size.

It's generally a bad idea to set the viewport max size preventing zooming, as a temporary measure i've added the following to my app.css.

 @media (max-width: 768px) {
        [type='text']:focus,
        input:where(:not([type])):focus,
        [type='email']:focus,
        [type='url']:focus,
        [type='password']:focus,
        [type='number']:focus,
        [type='date']:focus,
        [type='datetime-local']:focus,
        [type='month']:focus,
        [type='search']:focus,
        [type='tel']:focus,
        [type='time']:focus,
        [type='week']:focus,
        [multiple]:focus,
        textarea:focus,
        input::placeholder,
        textarea::placeholder,
        select:focus {
            font-size: 16px;
        }
    }

It would be nice to have an official fix/answer for this.

Thanks

[calebporzio]

Yeah, this is a valid report. I've thought about this. I'll have to try out your solution. I know other libraries change the input font size on mobile widths so that this doesn't happen, but that requires tweaking lots of other layouts to support the bigger font size. It's not really a simple fix.

I'm going to leave this open as something we'd like to tackle.

[NoisyFlake]

Since iOS 10, Safari on iOS ignores the maximum-scale=1 attribute for manual zooming in favor of accessibility (meaning the user can zoom regardless). However, it still prevents auto-zooming on input focus, therefore making it a viable choice on iOS.

Therefore I'm only adding this setting on Mobile Safari in my app.js:

document.addEventListener("DOMContentLoaded", function () {
    const isMobileSafari = /iPhone|iPad|iPod/.test(navigator.userAgent) && /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);

    if (isMobileSafari) {
        document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1');
    }
});

Not sure if this is 100% ideal, but so far I haven't found any downside to this. Might have to add other browsers to the list though.

[joshhanley]

@lloydowen thanks for reporting and thanks @NoisyFlake for the extra info! I've submitted a PR to set inputs/ textareas to be text-base by default on mobile devices and use text-sm on everything else using sm:text-sm.