[Mobile][iOS] Prevent zooming into the message input field.
Summary
It is a quality of life change for iOS or Apple product users. Because when clicking in an input field, iOS zooms into input fields and makes it hard to send messages. Which is an annoying feature, but it can be prevented by implementing some HTML or CSS.
Steps to reproduce
Open a iOS emulator or iOS device and click into an input field.
What is the current bug behavior?
In the message area there is a text input field with a send button, when clicking into the input it zooms into it and makes it hard to press the send button.
What is the expected correct behavior?
The zoom level shouldn't change.
Relevant error messages and/or screenshots
Video | Screenshot | Screenshot |
---|---|---|
example-a |
Possible fixes
Fastest but is not good for user experience cause it prevents users to zoom into the webpage!
< meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
Force the input to a fixed font size to 16px or higher (Example). Could also resolve by using Bootstrap, which uses 16px as default.
@media screen and (max-width: 767px) {
input, select, textarea {
font-size: 16px;
}
}
Edited by MS