Disable zoom on input focus in Android webpage

Question

Here\'s the dilema, I have a webpage (only for android devices) and in that page I have an input box (a text box specifically) and when it gets focus the browser zooms in. I

Answer 1

Keep the content narrower than the window.

You will have to design your page from the beginning with this in mind, but it is entirely effective.

The key is to use the @media css at-rule to only allow components to have widths that you know the screen is big enough to contain.

For example, if you have a content width set so that the text doesn't get too spread out on a larger monitor, make sure that width only applies to large screens:

@media (min-width: 960px){
.content{
  width : 960px;
}
}

Or maybe you have an image that is 500px wide, you might have to hide it on smaller screens:

@media (max-width: 500px){
.image{
  display : none; 
}
}