位置：固定在iPad和iPhone上不起作用

2018-07-04 08:09:30

我一直在固定定位在iPad上挣扎。我知道iScroll，它似乎并不总能奏效（即使在他们的演示中）。我也知道Sencha有一个解决方案，但我无法按Ctrl + F修复该源代码。

我希望有人可能有解决办法。问题在于，当用户在iOS移动Safari上向下/向上移动时，固定定位元素不会更新。

许多移动浏览器故意不支持position:fixed; 理由是固定元件可能妨碍小屏幕。

Quirksmode.org网站有一篇很好的博客文章解释了这个问题：http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

另请参阅此页以获取显示哪些移动浏览器支持position:fixed;的兼容性图表position:fixed; ：http：//www.quirksmode.org/m/css.html

（但请注意，手机浏览器世界正在迅速发展，所以像这样的表格可能无法保持最新版本！）

更新：iOS 5和Android 4都报告有位置：现在支持固定。

我今天在苹果商店自己测试了iOS 5，并且可以确认它的位置固定。尽管放大和平移固定元素仍然存在问题。

我发现这个兼容性表格比quirksmode更新更有用：http://caniuse.com/#search=fixed

它具有Android，Opera（迷你和移动）和iOS的最新信息。

固定定位在iOS上不起作用，就像它在计算机上一样。

想象一下，在放大镜（视口）下面有一张纸（网页），如果您移动放大镜和眼睛，就会看到页面的不同部分。这就是iOS的工作原理。

现在有一张清晰的塑料，上面写着一个字，这张塑料不管什么（位置：固定元件）都保持静止。所以当你移动放大镜时，固定元件看起来会移动。

或者，不用移动放大镜，而是移动纸张（网页），同时保持塑料片和放大镜的静止。在这种情况下，塑料板上的单词将保持固定，其余内容似乎会移动（因为它实际上是）这是一个传统的桌面浏览器。

所以在iOS中，视口移动，在传统的浏览器中，网页移动。在这两种情况下，固定元件仍然保持现实; 尽管在iOS上固定元素似乎在移动。

解决这个问题的方法是遵循本文的最后几段

（基本上完全禁用滚动，将内容放在单独的可滚动div中（请参阅链接文章顶部的蓝色框），并将固定的元素绝对定位）

“位置：固定”现在可以像iOS5中预期的那样工作。

位置：固定可以在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 4.0之前使用相同的页面，则还需要设置顶部位置，否则由于某些原因会添加小幅边距。

链接地址: http://www.djcxy.com/p/95629.html