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.