iOS input Field Zooming – Issue Persists on Staging with Clean Setup

Hi there,

I’ve noticed that on iPhones (including the latest 16 Pro Max), when tapping into a input field (e.g. name or address), the page zooms in slightly. This only happens on ios mobile devices and only during input.

To troubleshoot, I’ve set up a staging environment where:

– I’ve switched from the child theme to the main WoodMart theme

– All plugins are deactivated

– The issue still persists

Here is a video showing the issue: https://1drv.ms/v/c/e701fb6a52f72e79/EWKjqIt9n1ZBla-dQLEIZZgB9W2tC6vHpWDaljeWWbuE4g?e=mJEyxs

I have given a login link to the staging below.

Could you advise what might be causing this behaviour, I have checked the demo and this doesn’t happen.

Thank you.

Hi, Please use this temporary login instead. the previous one was mistake.

After some investigation, it looks like the zoom issue on iOS is related to the user-scalable setting in the viewport meta tag. I’m aware that you offer a setting to disable zoom (“Not Scalable”), but that approach isn’t ideal from an accessibility standpoint.

Instead, I’d prefer to follow best practices and increase the font size of input fields from 14px to 16px, which should prevent the zoom without disabling pinch-to-zoom entirely.

Could you please advise the correct way to adjust the font size for all input fields site-wide using Woodmart’s theme settings (preferably without custom CSS)?

Thanks

Hello,

For now, it’s possible via custom CSS, try to use the code below:

input[type='email'], 
input[type='date'], 
input[type='search'], 
input[type='number'], 
input[type='text'], 
input[type='tel'], 
input[type='url'], 
input[type='password'], 
:root textarea, 
:root select { 

font-size: 16px;
}

Kind Regards

just confirm if I want input to be 16px to stop zooming but to keep the placeholder text at 14px can I use the following CSS:

/* Prevents iOS from zooming input fields smaller than 16px */
input[type=’email’],
input[type=’date’],
input[type=’search’],
input[type=’number’],
input[type=’text’],
input[type=’tel’],
input[type=’url’],
input[type=’password’],
:root textarea,
:root select {

font-size: 16px;
}

input[type=’email’]::placeholder,
input[type=’date’]::placeholder,
input[type=’search’]::placeholder,
input[type=’number’]::placeholder,
input[type=’text’]::placeholder,
input[type=’tel’]::placeholder,
input[type=’url’]::placeholder,
input[type=’password’]::placeholder,
textarea::placeholder,
select::placeholder {
font-size: 14px;
}

Hello,

If that custom CSS works well for you, you can use such code.

Thank you for your time.

Kind Regards

[Author]

Posts