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 :
After focusing on First Name field (screen zoomed-in) :
After clicking on Done, screen stays zoomed in :
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 :
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
/*** Styles added to fix the issue with zoom in on iphone ***/ /* iPhone < 5: */ @media screen and (device-aspect-ratio: 2/3) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"]{ font-size: 16px; } } /* iPhone 5, 5C, 5S, iPod Touch 5g */ @media screen and (device-aspect-ratio: 40/71) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"]{ font-size: 16px; } } /* iPhone 6, iPhone 6s, iPhone 7 portrait/landscape */ @media screen and (device-aspect-ratio: 375/667) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"]{ font-size: 16px; } } /* iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus portrait/landscape */ @media screen and (device-aspect-ratio: 9/16) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"]{ font-size: 16px; } } |
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
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:
- http://iosres.com/
- http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
- http://stackoverflow.com/questions/11064237/prevent-iphone-from-zooming-form
- http://www.ampedupdesigns.com/blog/show?bid=53
Posted By: Prasanna Pulukurthi, Osmosee
