Spu*_*ley 66
许多移动浏览器故意不支持position:fixed;,理由是固定元素可能会妨碍小屏幕.
Quirksmode.org网站有一篇非常好的博客文章解释了这个问题:http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
另请参阅此页面以获取兼容性图表,其中显示了哪些移动浏览器支持position:fixed;:http://www.quirksmode.org/m/css.html
(但请注意,移动浏览器世界正在快速移动,因此这样的表可能无法保持最新状态!)
更新:据报道iOS 5和Android 4都有位置:现在支持固定.
我今天在Apple商店自己测试了iOS 5,并且可以确认它确实适用于固定位置.但是,在固定元素周围放大和平移存在问题.
我发现这个兼容性表比quirksmode更新,更有用:http: //caniuse.com/#search=fixed
它拥有Android,Opera(迷你和移动)和iOS的最新信息.
Jon*_*an. 38
固定定位在iOS上不像在计算机上那样有效.
想象一下,你在放大镜(视口)下面有一张纸(网页),如果你移动放大镜和你的眼睛,你会看到页面的不同部分.这就是iOS的工作原理.
现在有一块透明塑料上面有一个字,这片塑料无论什么都固定不动(位置:固定元件).因此,当您移动放大镜时,固定元素似乎会移动.
或者,不要移动放大镜,而是移动纸张(网页),保持塑料和放大镜片不动.在这种情况下,塑料薄片上的单词似乎保持固定,其余内容将显示为移动(因为它实际上是)这是一个传统的桌面浏览器.
因此在iOS中视口移动,在传统浏览器中移动网页.在这两种情况下,固定元素仍然存在; 虽然在iOS上,固定元素似乎在移动.
要解决这个问题的方法,是遵循最后几段在这篇文章中
(基本上完全禁用滚动,将内容放在一个单独的可滚动div中(参见链接文章顶部的蓝色框),并且固定元素绝对定位)
"position:fixed"现在可以像你在iOS5中所期望的那样工作.
小智 22
position:fixed可以在android/iphone上进行垂直滚动.但是您需要确保您的元标记已完全设置.例如
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
此外,如果您计划在android pre 4.0上使用相同的页面,您还需要设置顶部位置,或者由于某种原因会添加一小部分.
小智 20
现在苹果支持
overflow:hidden;
-webkit-overflow-scrolling:touch;
小智 16
固定页脚(这里有jQuery):
if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'Linux armv6l')
{
window.ontouchstart = function ()
{
$("#fixedDiv").css("display", "none");
}
window.onscroll = function()
{
var iPadPosition = window.innerHeight + window.pageYOffset-45; // 45 is the height of the Footer
$("#fixedDiv").css("position", "absolute");
$("#fixedDiv").css("top", iPadPosition);
$("#fixedDiv").css("display", "block");
}
}
// in the CSS file should stand:
#fixedDiv {position: fixed; bottom: 0; height: 45px; whatever else}
希望能帮助到你.
ken*_*ell 15
我在Safari(iOS 10.3.3)上遇到了这个问题 - 在触发touchend事件之前,浏览器没有重绘.固定元素没有出现或被切断.
我的诀窍是添加transform:translate3d(0,0,0); 到我的固定位置元素.
.fixed-position-on-mobile {
position: fixed;
transform: translate3d(0,0,0);
}
编辑 - 我现在知道为什么变换解决了这个问题:硬件加速.添加3D变换会触发GPU加速,从而实现平滑过渡.有关硬件加速检查的更多信息,请参阅以下文章:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css.
我最终使用了新的jQuery Mobile v1.1:http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/
我们现在有一个可靠的重写,在许多流行的平台上提供真正的固定工具栏,并安全地回退到其他浏览器中的静态工具栏定位.
关于这种方法最酷的部分是,与基于JS的解决方案不同,它在所有平台上强加了不自然的滚动物理,我们的滚动感觉100%原生,因为它是.这意味着滚动感觉无处不在,并且可以使用触摸,鼠标滚轮和键盘用户输入.作为奖励,我们基于CSS的解决方案非常轻量级,不会影响兼容性或可访问性.