移动浏览器上的固定比例元素

Question

我目前正在编写一个需要显示手风琴通知（从屏幕顶部向下滑动的那种）的 Javascript 插件。

只需在模态框和手风琴上使用这个 css，它就可以在桌面浏览器上完美运行。

position: fixed;
top: 0;
left: 0;
width: 100%; 

很遗憾，这在 Android 和 iOS 等移动浏览器上效果不佳。我的带有 Android 4 ICS 的 Galaxy S2 上的默认行为是固定位置元素位于正确的位置，并且大小为 100% 屏幕宽度。不幸的是，一旦您捏缩放并更改页面的比例，浏览器似乎不会重新计算 100% 的宽度并且元素会离开屏幕。平移内容不会平移固定元素。

我找到了iScroll，这是一个 Javascript 插件，它看起来完全符合我的要求 - 除了它需要更改页面主要内容的来源才能正常工作。我的插件必须在任何网站上工作，所以很遗憾这不是一个选项。

有人有什么想法吗？

Answer 1

尝试添加

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

到您的脑海中，这应该会阻止移动浏览器调整内容的大小。