Html 移动设备上的iFrame有问题

长话短说，我的一个客户想让我给他建一个ios模拟器，然后把它放到一个网站上。这样，当他的客户访问例如xyz.com时，他们会看到一个ios外壳（中间的图片是从ios手机上剪下来的）和外壳内的站点。 他并不想要任何真正的功能，实际上，他想要的只是能够向他的客户展示 他们的网站在移动设备上会是什么样子

这就是说，我觉得这应该很容易，我将iframe的大小设置为ios模拟屏幕大小（320 x 480等），将源代码指向 他已经建立了一个移动网站，就这样。由于他的移动网站已经有了灵活的宽度，它应该很适合

问题是，在iphone（4s/3gs）和IPAD上，iframe的内容根本不能正常工作。在ipad/iphone上，宽度超出了窗口。它的行为就像我从来没有为它设置过宽度……而点击……在该iframe中不存在。它们几乎不能被点击，如果有的话……几乎不能滚动等等

我做了更多的测试，（在朋友的droid手机上）和Sammy galaxytab 8.9和7.1上， 它们在视觉上显示得很好，但在内部没有点击

我在谷歌上搜索了“ios的iframe问题”和各种各样的查询，但没有具体说明，所以我选择了专业人士

以防万一你想明白我的意思。这里有一个我做的工作示例…如果你看代码，没有什么特别的。从字面上讲，是一个iframe及其源

哦，以防万一，为了测试，我改变了他从其他人那里得到的移动站点的源代码，并将其更改为我的端口网站，同样的事情

这是链接

我的问题是，iFrame和移动设备的交易是什么？似乎我无法让它们中的任何一个以标准pc上的行为方式显示我想要的内容

我已经在许多不同的设备/机器上进行了测试，所有的台式机都很好，按照它们应该的方式运行。在几乎所有的移动设备上，这都是不可能的

编辑-问题似乎是，特别是在IOS上，它不接受宽度/高度…过了一段时间，我决定将iframe包装在另一个div中，赋予iframes属性，并强制进行溢出滚动…现在看起来更好了，我可以单击按钮，但现在div不会滚动lol。

任何提示，链接等，我感谢

---

提前感谢。

您似乎正在使用html5，请查看iframe的“无缝”属性 （指定iframe看起来应该是包含文档的一部分）

---

我认为有办法解决这个问题。看这里：

---

您可能还需要为iframe添加宽度和高度，因为有时它对台式机不起作用

你好，埃里克，谢谢你的回复。我试过了，还是不行。内容的高度/宽度仍然是垃圾，也不接受。然后，如果我按原样离开，它将运行，但没有宽度/高度。如果我将其包装在包装器div中并添加宽度/高度/溢出，它将包含它，但您无法与iframes的内部内容进行交互…尽管尝试/建议很好，但感谢当我查看时，我注意到您还出现了4个错误atm:2x404错误、1 x错误视口和java脚本问题。Viewport应该这样做：java脚本（第48行）似乎无法获取标题id“header”，因为它不存在。嘿，Erik，对不起，伙计，我把整个事情都记下来了，哈哈，我决定用穴居人的方式手动重新制作整个事情，客户端需要它在ios/ipad上工作，而且由于iFrame在移动设备上有很多问题，这是我离开的唯一一条路。我认为这是你的一个好决定，如果可能的话，总是避免使用iFrame。