Search code examples
htmlcssmeta-tagsmeta

Meta tag? form field zooms on focus but does not un-zoom when on focus out on mobile devices?


I have a website that I am trying to make mobile friendly. When I get to my forms though when the textbox is selected the screen zooms in when you're done it does not zoom back out. I do not think this is my CSS that is doing this I have a feeling it involves the way you set up your meta tags. Is there a way I can adjust my meta tags to not do that zoom in since its not zooming out? Or have it at least zoom out once the focus is lost.

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">

Solution

  • If you wanted to remove zooming on the page altogether, you could try adding user-scalable=0 to your viewport tag, like so;

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

    But this may not be ideal. From what I can gather, another way to prevent this would be setting the input text of the form in question to be above a certain size, to prevent zooming on the form specifically. For most iOS/mobile devices, that size seems to be around 16px, although this would likely vary between devices.

    input {
        font-size: 16px;
    }