我有一个具有以下配置的网站:
<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 的行为相同。是否有用户缩放页面的事件?