当使用iPhone或iOS设备在`iframe`中查看时，为什么`position：fixed`不起作用？ [英] Why does `position:fixed` not work when viewed in an `iframe` using an iPhone or iOS device?

问题描述

我查看了stackoverflow，似乎 位置：固定在iOS移动设备的iframe中过去一直存在问题，但尚未得到答案。

I've looked into stackoverflow and it seems that position:fixed in an iframe for iOS mobile devices has been an issue in the past but have yet to have an answer.

这是我通过jsbin创建的一个例子： http://jsbin.com/pekeca/1/

Here's an example I created via jsbin: http://jsbin.com/pekeca/1/

在该示例中，有一个父HTML页面使用包含另一个HTML页面（子）的iframe。以下是需要注意的事项：

In that example, there is a parent HTML page that uses iframe which contains another HTML page (child). Here are the things to note:

• 当在任何设备上查看父HTML时，子HTML中的导航栏保持不变。这是预期的行为。


• 但是，无论浏览器如何在iPhone上查看父HTML，子HTML中的导航栏都会丢失其固定位置。 这是一个仅在iPhone中发生的错误。


• 当儿童HTML页面在iPhone中直接查看（即不在iframe内），导航栏保持固定位置并且工作正常。

• When the parent HTML is viewed on any device, the navigation bar in the child HTML stays fixed. This is the intended behavior.
• However, when the parent HTML is viewed on an iPhone regardless of the browser, the navigation bar in the child HTML loses its fixed position. This is a bug that only happens in iPhones.
• When the child HTML page is viewed directly (i.e., not inside an iframe) in an iPhone, the navigation bar stays in a fixed position and works fine.

有没有人在iPhone或iOS设备中找到位置：固定的解决方法？

Has anyone figured out a workaround for position:fixed in iPhones or iOS devices?

推荐答案

在iOS上的Chrome和Safari中，这里的问题似乎不是固定位置，而是iframe的高度。来自另一个SO回答：从Safari iOS 4.2.1开始，到4.3.3为止，强制显示iFrame的全部内容。

In Chrome and Safari on iOS it seems the issue here is not the fixed position, but with the height of the iframe. From another SO answer: "Starting in version 4.2.1 of Safari iOS, and still going as of 4.3.3, the entire content of an iFrame is forcibly shown."

这些其他帖子可能对您有所帮助：

These other posts might help you:

• iOS（iPad）内容裁剪问题上的iframe - https://stackoverflow.com/a/10816492/1359306


• iFrame和Mobile Safari（iPad / iPhone） - https://stackoverflow.com/a/19667786/1359306

• iframe on iOS (iPad) content cropping issue - https://stackoverflow.com/a/10816492/1359306
• iFrame and Mobile Safari (iPad/iPhone) - https://stackoverflow.com/a/19667786/1359306

这篇关于当使用iPhone或iOS设备在`iframe`中查看时，为什么`position：fixed`不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！