1

我有一个具有以下配置的网站:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=5.0;minimum-scale=1.0;user-scalable=1;" />

和一个 div 元素

<div style="position:fixed;top:0;left:0;width:100%;height:40px;">Fixed Header Content</div>

(您可以在此处找到示例:http: //massmatics.de/demo/test.html

在 iOS 上观看此站点并进行缩放时,此元素的大小会增加,但会超出缩放区域。

在 android 上执行相同的操作时(在 Nexus 平板电脑上与 Android 4.x 测试)固定元素在缩放时消失,但当此操作完成后,它会在缩放区域显示为增加的版本。

我认为 chrome 的行为是正确的,但我现在的问题是:

有没有办法在 android 上获得与在 iOS 上相同的行为?

我问的原因是页面上有很多内容,在小型设备上查看时应该缩放,但在 Android 上,放大的固定元素占用了所有空间,因此缩放并不是真正的优势。

此致

更新:我在示例中添加了 position:fixed 的 JS 实现(我知道,性能很差,仅用于测试目的。) - 仍然与 position:fixed 的行为相同。是否有用户缩放页面的事件?

4

1 回答 1

0

position:fixed 支持是去年在 iOS5 中添加的——根据我的经验,Android 处理这些元素的方式不一致。

我相信完成你想要做的事情的唯一可预测的方法是用 JavaScript 将它全部连接起来。可能不是您希望的答案,但 position:fixed 无论如何都很少是移动设备上的正确解决方案。

于 2012-12-06T22:04:05.057 回答