Follow

Prevent iOS from zooming in on input fields

Developing a responsive website that works well across various browsers and devices is tough. The difficulty is compounded by the fact that browser vendors keep adding distinct behaviors to improve user experience. We recently faced an issue with the auto zoom-in feature in Safari on iOS. 

Lets see the below screen as an example.

Before focusing on a field :

preventios_01

After focusing on First Name field (screen zoomed-in) :

preventios_02

After clicking on Done, screen stays zoomed in :

preventios_03

When a user clicks on an input or a select field in Safari on IOS, Safari has a behavior of zooming-in on the field when the keyboard opens. Even after the user dismisses the keyboard, the screen still stays zoomed-in. The user has to then zoom out manually. Although this is done to make it comfortable for the user to fill in field value where the font size is small (< 16px), it can be annoying.

Possible solutions

There are three ways to fix this issue.

Solution 1

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 won’t allow the user to zoom-in at all, hence also disables that annoying behavior. Though, some might argue that this is not a very user friendly way to handle the problem.

Solution 2

What If you want to allow the user to still zoom in on the page? You can use the following CSS

By setting the font-size of the input field to a font-size of 16px (or larger), we prevent the browser from zooming in on focus. Note that we use the device aspect ratio to set the font size of 16px only for devices which have the specified device-aspect-ratio.

What is device-aspect-ratio?

This represents the number of horizontal pixels over the number of vertical pixels. This value consists of two positive integers separated by a slash (“/”) character.
The above media queries are written for the different iPhones based on their  aspect ratio. Device aspect ratio can be calculated by its logical resolution

preventios_04

From the above information we can say that

iPhone type Logical Resolution = device aspect ratio
iPhone < 5 2/3
Iphone 5, 5c, 5s, iPod touch 5g 320/568 =  40/71
iPhone 6, iPhone 6s, iPhone 7 375/667
iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus 414/736 = 9/16

Solution 3 :

If your body tag is set to font-size: 16px, and if you use font-size greater than or equal to 1em or 100% for inputs and select fields, you will not get this problem at all and the user will still be able to zoom in.

References:

  1. http://iosres.com/
  2. http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
  3. http://stackoverflow.com/questions/11064237/prevent-iphone-from-zooming-form
  4. http://www.ampedupdesigns.com/blog/show?bid=53


Posted By: Prasanna Pulukurthi, Osmosee

Are you interested? follow us and get notified of new posts

Leave A Reply

3 × 3 =