Menu
I've got this code:
<select> <option value="c">Klassen</option> <option value="t">Docenten</option> <option value="r">Lokalen</option> <option value="s">Leerlingen</option> </select> Running in a full-screen web-app on iPhone.
When selecting something from this list, the iPhone zooms in on the select-element. And doesn't zoom back out after selecting something.
How can I prevent this? Or zoom back out?
710
To turn off Zoom, go to Settings > Accessibility > Zoom, then tap to turn Zoom off.
If you enlarge the field by increasing all dimensions by 16 / 12 = 133.33%, then reduce using scale() by 12 / 16 = 75%, the input field will have the correct visual size (and font size), and there will be no zoom on focus.
Giving a meta tag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Prevent zooming all together by adding this meta tag to your head tag. This tells the mobile browser to use the same width scale and will not allow the user to zoom in at all, hence also disables that annoying behavior.
Open the Settings app on the iPhone or iPad. Scroll down and choose the Safari browser from Settings. From Safari Settings, select the Page Zoom Safari option. Within the window, tap to select the Zooming level.
It is probably because the browser is trying to zoom the area since the font size is less than the threshold, this generally happens in iphone.
Giving a metatag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Since the problem is with select element only, try using the following in your css, this hack is originally used for jquery mobile.
HTML :
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> CSS:
select{ font-size: 50px; } src: unzoom after selecting in iphone
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
