Android 2.3 WebView bug 之 position:fix

最近在 Android 2.3 上做一个小应用,native / web 混合,用了一个 WebView 做内容主要显示区域。用了 jQuery Mobile 的列表和内置的搜索功能。那个搜索框在列表最顶端,当列表向上卷动的时候,搜索框会跟随一起卷动出屏幕顶端。客户看了 demo,表示「这个东西很好啊,要是能停留在顶部就更好了」。之后发生的事情如下:

1、设置 position:fix 以及修正各种 CSS margin / padding / top,确保这个东西……固定在页面顶部显示。

Chrome 测试成功,iPhone 测试成功,Android WebView、Android 内置浏览器均失败。

2、搜索 Android browser fix top,看到 http://bradfrostweb.com/blog/mobile/fixed-position/ 说:必须禁止用户缩放。

于是添加 

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

测试,仍然可以缩放。

3、继续搜索,看到 http://garrows.com/?p=337 的代码,去除无脑重复部分,代码如下:

<meta name='HandheldFriendly' content="True"/>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />

缩放被禁止了。卷动列表后搜索框成功置顶。

4、让我稍微卷动一下,再点一下输入框看看……


亲爱的输入框就这样魂飞天外了。下面那个光标闪烁的,看起来像是输入框的地方根本无法获得焦点,而卷动再多一点,可以接受焦点的那个白条就再也找不到了。


5、结论

...

iOS 真好,嗯。

以上。

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

Wolf0403

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值