0
Good afternoon, everyone,
I have the following problem and did not know how to describe a title well, I have a field that has a textarea that adapts the page width with 98%. What I want to avoid is that when the user clicks inside the zoom textarea, what is happening is that when he clicks to type the page gets much bigger and creates such a horizontal scroll bar.
Does anyone have any tips ?
0
First of all don’t forget the viewport.. if you don’t have it, you don’t need to read any more, there’s your problem ;)
In css there is the :focus can use this to work the element when it’s in focus and when it’s in mobile
@media (min-width:500px){
textarea:focus{
...
}
}
This way you can adjust the height as you want ;) Still it would be easier to explain and/or prove my reasoning (I haven’t tested, I’m just trying to see your problem) if you leave some of your code :)
Hug and good luck!
0
A widely used hack is to set the font size to 16px.
@media screen and (max-width: 640px){
textarea {
font-size: 16px;
}
}
Apple devices zoom into fields on focus until the text is displayed on the screen with the size of 16px. Setting this value from the beginning, the zoom does not happen.
Source: http://uxcellence.com/2014/01/15/quick-fix-increase-font-size-to-16px-to-fix-input-zoom/
Can you explain how this works?
Browser other questions tagged css
You are not signed in. Login or sign up in order to post.
This would be on a mobile device?
– Kazzkiq
Yes Kazzkiq, is giving me a headache this.
– Bruno Luiz
Have you tried adding the metatag viewport? Example:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">– Kazzkiq
maybe a
max-widthor amax-heightsolve this? to lock the horizontal scroll maybeoverflow-x: hidden;I don’t know if these tips can solve your problem, but I hope so– David Concha
So when I added the viewport the site exploded and I couldn’t fix it, it makes the letters huddle together in one of the other ones.
– Bruno Luiz
I think it is better to change strategy, increase is purposeful to facilitate the life of the user, block such feature is to hinder the life of the user and provide a bad experience.
– Guilherme Nascimento
So, I simulated a page like facebook does in the app, when I click on Textarea it directs to another page that has a textarea with the image upload buttons, User image and the textarea takes almost the whole page put a font with 2in to get a good size for the user. When it stays in Focus it explodes a lot the original size.
– Bruno Luiz