How to prevent iPhone from zooming in on select in a web app with CSS?

Spread the love

To prevent iPhone from zooming in on select in a web app with CSS, we add a meta element and set the drop[ down font size.

For instance, we write

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

to add a meta tag that disable zooming by setting the minimum-scale and maximum-scale to 1.0.

Then we write

select {
  font-size: 50px;
}

to set the font size of the select element to 50px.