Html 移动设备上的 IFRAMES 有问题

IFRAMES on mobile devices problematic

提问by somdow

So long story short, a client of mine wanted me to build him an ios emulator kind of, and put it on a site. This way, when his clients go to for example, xyz.com, they see an ios shell(a picture with the center cut out of ios phone) and their site inside of that shell. He didnt want any real functionality really, all he wanted was to be able to show his clients what their websites would look like on a mobile device

长话短说，我的一个客户想让我为他构建一个 ios 模拟器，然后把它放在一个网站上。这样，当他的客户访问例如 xyz.com 时，他们会看到一个 ios 外壳（从 ios 手机中切出中心的图片）以及该外壳内的网站。他真的不想要任何真正的功能，他想要的只是能够向他的客户展示他们的网站在移动设备上的样子

That said, i figure this should be easy, i take an iframe size it up to the ios mock screen size (320 x 480 etc), put the source to point to the mobile site he already had built, and that's it. Since the mobile site he has already has flexible widths, it should fit nicely........

也就是说，我认为这应该很容易，我将 iframe 大小设置为 ios 模拟屏幕大小（320 x 480 等），将源指向他已经构建的移动站点，就是这样。由于他的移动网站已经有灵活的宽度，它应该很好地适应......

Problem is that, On the iphone(4s/3gs) and IPAD, the contents of the iframe dont work properly, if at all. The width goes out the window on an ipad/iphone. it behaves like i never set a width for it....and the clicking....non existant within that iframe. They can barely be clicked if at all....can barely scroll etc.

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

as i did more testing, (on a friends droid phone) and on my Sammy galaxytab 8.9 and 7.1, they display just fine as far as visually but, clicking inside is nonexistent.

当我做了更多的测试时，（在朋友的机器人手机上）和我的 Sammy Galaxytab 8.9 和 7.1，它们在视觉上显示得很好，但不存在点击内部。

Ive googled "iframe problems with ios" and varying queries but nothing specific so i come to the pros.

我在谷歌上搜索了“ios 的 iframe 问题”和不同的查询，但没有什么具体的，所以我来找专业人士。

Just incase you want to see what i mean. heres a working example of what i made...if you look at the code, nothing fancy. literally, an iframe and its source.

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

Oh and just in case, to test, i changed the source form the mobile site he already got from someone else, and changed it to my port website, and the same thing.

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

heres the link http://somdowprod.net/4testing/411/index2

继承人链接http://somdowprod.net/4testing/411/index2

My question is, whats the deal with IFRAMEs and mobile devices? Seems i cant get any of them to display what i want the way it behaves on a standard pc.

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

Ive tested on many different devices/machines and all desktops are fine, behave the way they should. on almost every MOBILE device, its a nogo.

我已经在许多不同的设备/机器上进行了测试，所有台式机都很好，表现得很好。在几乎所有的移动设备上，它都不是。

EDIT - The problem seems to be that on IOS specifically, it doesnt accept width/height...after a while, i decided to wrap the iframe in another div, give that the iframes properties, and force an overflow scroll.......it now LOOKS better, i CAN click the buttons, but now the div wont scroll lol.

编辑 - 问题似乎是在 IOS 上，它不接受宽度/高度......一段时间后，我决定将 iframe 包装在另一个 div 中，给出 iframes 属性，并强制溢出滚动...... ...现在看起来好多了，我可以点击按钮，但现在 div 不会滚动，哈哈。

any tips, links, etc, i appreciate.

任何提示、链接等，我很感激。

Thanks in advance.

提前致谢。

采纳答案by Scriptor

It seems you are using html5, look into The 'seamless' Attribute for iframe's (Specifies that the iframe should look like it is a part of the containing document)

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

http://www.w3schools.com/tags/tag_iframe.asp

http://www.w3schools.com/tags/tag_iframe.asp

回答by user2330624

I think there is a way to solve this. look here: https://discussions.apple.com/message/19780023#19780023

我认为有办法解决这个问题。看这里：https: //discussions.apple.com/message/19780023#19780023

you may need to also add width and height to the iframe because sometimes it does not work as well for desktops.

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