清风湖畔 明月窗边

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 真好,嗯。

以上。

阅读更多
个人分类: Android
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

Android 2.3 WebView bug 之 position:fix

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭