IMG_7445

5 Lines of CSS That Will Improve Any Mobile Design for iOs

Posted on Posted in Tips

Developing for Mobile is challenging enough without adding device driven settings that run client side and mess up your awesome responsive design. Here is how to prevent one very common problem: form elements cause mobile browser to zoom in when element on focus. The issue shown in three screengrabs below from an iPhone 7.

IMG_7446IMG_7444IMG_7445

If you are testing your site on a phone and you find the site ‘zooms in’ when clicking a form element like the middle image above, you need this fix. It is caused by the iOs or other OS zooming in to the min default text size for form elements of 16px. The ‘problem’ is in the last image, after losing focus on your form element, the view-able area does not zoom back out, ruining all that great css you painstakingly crafted. Now the site is being viewed at something like 110% zoom and you will get that floaty effect where scrolling causes the site to bounce from side to side, among other ill effects.

The fix is simple. Customize it for your application, but for all current phones up to iPhone + models all you need is the code below. Add this to your top level css file at the very bottom. This will serve to force min text size of all of the form elements on your site to be 16px font size therefore matching the mobile default of 16px. This prevents the zoom effect from form elements viewed on mobile. If you find it is happening on iPad too, change max-width from 736px to 1024px.

@media (max-width: 736px) {
input, select, textarea {
font-size:16px !important;
}
}