iOS zooms on vuestic inputs

[asvae]

Vuestic-ui version: 1.8.7

Out inputs by default trigger zoom on iOS (safari and chrome).

Here's some explanation on why this happens: https://defensivecss.dev/tip/input-zoom-safari/#:~:text=When%20focusing%20an%20input%20in,size%3A%2016px%20to%20the%20input.

Here's some more

The automatic zooming behavior in iOS Safari when focusing on an input field is indeed a common issue that can be disruptive to user experience. The reason why setting a font-size of 16 pixels or larger on input fields prevents this zooming behavior lies in the way Safari handles mobile web pages.

Mobile Accessibility Features: On mobile devices, especially on smartphones, the screens are smaller, and the default text size can be challenging to read. To improve accessibility and readability, iOS Safari automatically zooms in on input fields if the text is below a certain threshold size. This is intended to help users see and interact with the input field more easily.

Default Minimum Font Size: The default threshold in iOS Safari for zooming on input fields is a font size of 16 pixels. This means that if the text in an input field is smaller than 16 pixels, Safari assumes it might be too small for comfortable interaction and automatically zooms in to make the text more legible.

Preventing Zoom with Font Size: By explicitly setting the font size of input fields to 16 pixels or larger, you're effectively telling Safari that the text is already sufficiently large for easy interaction. This prevents the browser from applying its automatic zoom, as it recognizes that the text meets or exceeds the minimum legibility threshold.

Consistency Across Browsers: While this behavior is specific to Safari on iOS, setting a reasonable font size for input fields is a good practice for web design in general. It ensures better consistency and usability across various browsers and devices.

In conclusion, setting font-size: 16px on input fields is a simple and effective way to maintain a consistent and user-friendly layout on iOS devices, preventing the automatic zoom behavior of Safari and enhancing the overall user experience on mobile web pages.

We probably want to have font size in inputs 16px by default. But I'm not 100% sure.

[bagrovYKT]

Hello, i think this is not a bug of a vuestic components. Try to use a meta viewport property in your index.html, for example:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

[m0ksem]

We can explicitly set 1rem which is equivalent to 16px on mobile I think. I don't have mobile Safari, so I'll pass this issue to someone else to test. Setting 16px means user with system font 24px (blind people) will see small input text, instead of size from system.

[khurram-ansari]

@asvae Which IOS version you tested it on?