CODEWITHSUNDEEP
javascripthtmlcsswebkit
Steve Alereza
Steve Alereza

Reputation: 153

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>

Upvotes: 0

Views: 270

Answers (1)

Brandon McConnell
Brandon McConnell

Reputation: 6119

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/

Upvotes: 2

Related Questions