Android 2.3 WebView bug 之 position:fix

原创 2012年10月27日 18:43:17

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

以上。

苹果手机safairi不支持position:fixed

我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部。但在IOS的safari和webview中,对position:fixed的...
  • baidu_31345523
  • baidu_31345523
  • 2016年02月29日 17:08
  • 2161

Android系统中 webkit 内核浏览器position:fixed所造成的兼容问题

背景概述 Google已经在Mobile Web App开发上取得了很大的突破. HTML5已经拉近了Mobile设备Native App与Web App的差距. mobile Gmail 正是...
  • yaoduren
  • yaoduren
  • 2013年01月31日 17:35
  • 11648

WebView使用全攻略

1.> 转载请标明出处 本文出自[HCY的微博] 一、概述移动web开发相对原生开发有以下好处: 开发成本低,可以适配多种平台的设备 迭代更新成本低,可以快速的实现更新的内容全覆盖 所以对于频繁更...
  • Huang_Cai_Yuan
  • Huang_Cai_Yuan
  • 2016年01月12日 14:47
  • 6736

解决android webkit的css postion:fixed支持问题【转】

 解决android webkit的css postion:fixed支持问题android webkit不能支持postion:fixed,导致无法设计网页上的菜单在页面上下滚动时固定在一个位置。解...
  • rosary226
  • rosary226
  • 2011年06月14日 11:48
  • 2904

Android WebView编程的那些坑(一)

最大的坑是ROM不同,webkit不同,差异性很大。再加上google的坑,真是坑上加坑。比如js注入问题,比如client回调接口时序问题, 比如内存回收问题,etc 1、内存泄漏问题,...
  • zhangcanyan
  • zhangcanyan
  • 2016年05月26日 18:21
  • 1536

Android中的webview详细使用

package com.administrator.interviewsummary; import android.app.Activity; import android.app.Progres...
  • zl18603543572
  • zl18603543572
  • 2015年11月06日 21:39
  • 6885

一个小菜鸟的Android Studio2.3升级之旅,附赠升级之后Gradle的配置方法

正确升级Android Studio2.3的姿势,完美解决一直refreshing或者一直building的问题。...
  • hylczp
  • hylczp
  • 2017年03月03日 12:49
  • 20664

华为Y210S固件(C8685,Android 2.3,V100R001C92B824,中国电信,05011GXL)

  • 2014年05月20日 12:31
  • 369KB
  • 下载

android 2.3 Mms 源码 0分下载

  • 2013年09月24日 13:08
  • 14.5MB
  • 下载

android 2.3 Browser 源码 0分下载

  • 2013年09月24日 09:55
  • 22.68MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 2.3 WebView bug 之 position:fix
举报原因:
原因补充:

(最多只允许输入30个字)