Disable zoom on input focus in Android webpage

后端未结

关注

 30  1205

Here\'s the dilema, I have a webpage (only for android devices) and in that page I have an input box (a text box specifically) and when it gets focus the browser zooms in. I

相关标签:

30条回答

抹茶落季

2020-12-02 06:00

Typically you don't want to disable the accessibility features.

But you can get around the zoom issue by simply adding a fixed div and placing your web page inside it.

#app {
  position: fixed;
  top: 0em;
  bottom: 0em;
  left: 0em;
  right: 0em;
  overflow: scroll;
 }

<body>
<div class="app">
  <!-- the rest of your web page  -->
  <input type="text">
</div>
</body>

<body>
     <div class="app">
     </div>
</body>

0 讨论(0)

半阙折子戏

2020-12-02 06:01

Not possible!

I've got some bad news for you all. It's now been 6 months and no one has correctly answered the question.

Also I've finished working on that project and employer.

I'm afraid to say it, but exactly what I asked for is impossible. Sorry peoples. But I'm going to leave the question alive so people can see the other options.

0 讨论(0)
发布评论:

提交评论
- 加载中...
迷失自我

2020-12-02 06:01
This works where #inputbox is the id of the input form element.

I'm using this to stop a search box from auto zooming in IOS it's a mod of the earlier post above since the mouseover event would only work the first time but fails to trigger subsequent times. Enjoy this it was a real hair puller...
```
$("#inputbox").live('touchstart', function(e){
    $('head meta[name=viewport]').remove();
    $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
    }
);

$("#inputbox").mousedown(zoomEnable);

function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
陌清茗

2020-12-02 06:01

For anyone that is trying to stop zoom when trying to focus on a hidden input field, you can make the hidden input as big (or at least as wide) as the screen area(or viewable area) - this stopped it zooming.

e.g.

HIDDENinput.style.width = window.innerWidth;

HIDDENinput.style.height = window.innerHeight; (optional)

0 讨论(0)
发布评论:

提交评论
- 加载中...
半阙折子戏

2020-12-02 06:02
Try this one, it works on my device:
```
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" /> 
```
However, when I double click over the input box, the keyboard slides up and makes the page lessen in height.
0 讨论(0)
发布评论:

提交评论
- 加载中...

野趣味

2020-12-02 06:04

The following worked for me (Android Galaxy S2):

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>

0 讨论(0)

Disable zoom on input focus in Android webpage

Not possible!