Prevent iPhone from zooming in on `select` in web-app

Answer 1

I am a bit late to the party, but I found a pretty neat workaround that solves this issue only with css manipulation. In my case I couldn't change the font size due to design reasons, and I couldn't disable zooming as well.

Since iPhone's will zoom form fields slightly if the text is set to less than 16 pixels, we can trick the iPhone to think that the font size is 16px and then transform it to our size.

For example, lets take the example when our text is 14px, so it does zoom because it is smaller than 16px. Therefore we can transform the scale, according to 0.875.

In the following example I've added the padding to show how to convert other properties accordingly.

.no-zoom {
    font-size: 16px;
    transform-origin: top left;
    transform: scale(0.875);            //  14px / 16px
    padding: 4.57px;                    // 4px / 0.875
}

I hope it helps!