Currently, with the latest version of iOS (14.4), there is a zoom effect on any input box that receives focus, unless the input has a font size of 16px without focus.
While this may not seem like an issue initially, once focus moves away from the input box, the scaling remains and negatively impacts the page's appearance.
The viewport tag in the single main page is correctly configured:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
Here is the React code snippet:
render() {
return (
<div className='my-form' style={this.props.style}>
<h3>MyForm</h3>
<div>
<input
{...InputGetterSetter(this, 'text')}
placeholder="Please enter text"
onKeyDown={this.onKeyDown.bind(this)} />
</div>
This is how the CSS is defined using SASS:
.my-form {
width: 100%;
height: 100%;
text-align: center;
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
input {
width: 66%;
text-align: center;
}
.bottom-button {
background-color: #00ac69;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 150px;
outline: none;
border: none;
overflow: hidden;
}
}
.keyboard-expanded {
.my-form {
.bottom-button {
height: 60px;
.ion-ios-telephone {
font-size: 22pt;
}
}
}
}
.dark {
.my-form {
input {
color: white;
}
}
}
If you want to prevent zooming altogether, adjusting the font size can help. However, if you prefer to have the zoom effect but wish for it to "unzoom" when focus is removed, is there a way to achieve this?