在 Android 中,部分浏览器不支持 css 的 position: fixed 属性。

详细的支持情况见:http://caniuse.com/css-fixed

对于不支持的情况,我们可以通过以下的解决方法来解决该问题,记录下。

使用 viewport 标记

1
<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />

详细参数解释:

  • width:视口的宽度。可以使用像素值,但推荐使用device-width关键字。表示依照设备屏幕的宽度。

  • height:视口的高度。不用指定。

  • initial-scale:初始缩放值。比如1.0表示一个视口像素等于一个屏幕像素。

  • minimum-scale:最小比例值。范围从0至10.0

  • maximum-scale:最大比例值。范围从0至10.0

  • user-scalable:用户是否可以缩放视口。值可以是: 1, yes, or true: 允许用户缩放 0, no, or false: 不许用户缩放

使用 position: absolute 代替

可以简单的使用 position: absolute 代替,但是在桌面端会显示不正常,我们可以通过判断 userAgent 来指定 position 的值。

代码如下:

1
2
3
4
5
6
if (navigator.userAgent.match(/Android|iPhone|iPad|iPod/i)) {
	$div.css('position', 'absolute');
} else {
	$div.css('position', 'fixed');
}

使用 js 库

iScroll

注: 该库也没有使用过,有待研究…