Search code examples
cssmobileinputwebkitviewport

webkit mobile input zoom disable still zooming when adding width attribute

Plenty of posts on how to disable autozoom on focused input fields.

My solution is the 'font-size:16px;' and appropriate meta viewport setings to prevent page zoom.

However, in my example, when looked at on aniPhone 5s running iOS 9.2, I'm still getting a slight zoom.

I set the margins for everything to 0, and on page load you can see the red border for the input filed touching the viewport on the side.

Once you zoom in, you can tell, the page zoomed a bit.

How do I lock this up?

http://jsbin.com/kicoyapudo/1/edit?html,css,js

and plain oputput to view in mobile safari: http://output.jsbin.com/kicoyapudo/1

body,html,input,form {
  margin:0;
  padding:0;
}

input[type='text'] {
width:100%;
  font-size: 16px;
  border:1px solid #900;
}
Solution

  • The border creates a width greater than 100% which overflows the body.

    Use :

    input[type='text'] {
  box-sizing : border-box;  // border wont add to the width
  width:100%;
 font-size: 16px;
 border:1px solid #900;
 }