Search code examples
javascripthtmlcsswebkit

HTML/CSS - Zooms in on select tag when tapped on mobile

I have a select menu with options.

When I'm on a mobile device I tap this menu, it slightly zooms in on it. Is there a -webkit property or something that is causing this?

How do I change it so that it doesn't zoom in on the screen when the select menu is tapped?

Please see the gif below.

enter image description here

<select class='example'>

  <option>Example</option>
  <option>Example</option>
  <option>Example</option>
  <option>Example</option>
  <option>Example</option>
  <option>Example</option>

</select>
Solution

  • Yes, some mobile phones and tablets behave this way when interacting with form elements. Adding this meta tag to your <head> should resolve your issue:

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

    Here is a detailed explanation on what this does and why it works: https://thingsthemselves.com/no-input-zoom-in-safari-on-iphone-the-pixel-perfect-way/