修复移动浏览器上的缩放元素

Question

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

只需在模态和手风琴上使用这个css，它在桌面浏览器上的效果非常好。

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

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

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

有没有人有任何想法？

Answer 1

尝试添加

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

到你的脑袋应该阻止移动浏览器调整内容的大小。