停止iOS7放大WebView

Question

I have looked at other questions similar to this and they do not ask the exact question that I need to ask!

Question: How do I stop WebView from zooming in on an input field AND still respond to css media queries.

The reason for the last part is this:

<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width, height=device-height">

When I use this meta tag, notice the width=device-width and height=device-height . This is good because it stops the zooming on the WebView on my iPad.

However, with this, my css queries stop working! My css is:

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts */
  #wrap{width:768px;height:1024px;background-color:#FFF;border:1px solid gray;position:relative;}
  form{width:380px;overflow:hidden;padding-top:30px; padding-left: 40px;}
  .results{position:absolute;top:0;right:0;left:0;bottom:0;background-color:#FFF;height:100%;float:right;color:#000;display:none;}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts */
  #wrap{width:1024px !important;height:768px;background-color:#FFF;border:1px solid gray;position:relative;margin:0 auto;}
  form{width:511px;overflow:hidden;padding-top:30px; padding-left: 106px;}

}

As you can see, the top query is portrait and the bottom landscape. When I have the meta tag in, it will only load the portrait version (no matter how what orientation the iPad). This is because the meta tag is setting the height and width.

If I take away the width=device-width and height=device-height in the meta tag, then the css works again, but then the zooming in on inputs when focus also does.

I had tried some JavaScript fixes but I actually got a better result with the zooming using the simple meta tag, but I am open to a JavaScript fix also.

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">

Plus, why are you adding such constrained widths on your elements? By that point, you should maybe look in to responsive design .