Disabling mobile Safari's focus event (zoom)

Question

When clicking an input field on an iOS device, it will zoom in on that element. Can i disable this focus event?

score 13 · Accepted Answer · answered Mar 09 '12 at 22:04

13

I put up this gist which solves the problem. https://gist.github.com/2008932

The accepted solution is not correct, as it will cancel focus altogether, which prevents data entry.

answered Mar 09 '12 at 22:04

zachleat

Excellent! Can't believe everyone is still advising viewport hacks when this seems to solve this issue quite elegantly. Thanks – thatguy Mar 07 '13 at 07:46
3

For the record, this is a viewport hack—it’s just dynamic in JavaScript. :) – zachleat Mar 07 '13 at 16:29
If you are using mobile boilerplate (http://html5boilerplate.com/mobile/) with helper.js you can call MBP.preventZoom(), its does pretty much the same work – Davor Jun 05 '13 at 23:04
1

Perfect, this is exactly what I was looking for. All others were giving foul behavior or messing with the viewPort to the point where responsiveness would be overwritten. Thanks Zach! – Dylan Aug 14 '14 at 15:06

score 2 · Answer 2 · edited May 23 '17 at 10:28

2

I think you would be better to set the viewport:

<meta name="viewport" content="width=device-width, user-scalable=no" />

edited May 23 '17 at 10:28

Community

answered Jan 10 '13 at 23:55

Rowan

I disagree. With @zachleat's solution it is not needed to completely disable zooming. Disabling zooming alltogether in most cases is a bad idea: you're disabling a standard interaction. – Fer Mar 17 '14 at 21:27
Not only is this user hostile it also doesn’t work (thankfully) in iOS10+. – Robin Whittleton Sep 20 '17 at 11:46

score 0 · Answer 3 · edited Dec 05 '13 at 09:10

0

 document.getElementById("idOfInputField").onfocus = function(){return false;}

edited Dec 05 '13 at 09:10

Nikos M.

answered Feb 15 '11 at 14:58

Chugworth

score 0 · Answer 4 · answered Feb 06 '21 at 11:03

0

Best solution to disable auto zoom in mobile devices on touch event

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

answered Feb 06 '21 at 11:03

Denis Staci

4 Answers4