Android浏览器宽度拉伸到iframe内容宽度，尽管溢出：隐藏

我试图模仿Android（海豚浏览器）中的桌面风格iframe与一些成功。使用的技巧是将与position:relative;放在<div>的固定尺寸和overflow:hidden;之内，然后使用jQuery Mobile（或者只是vmouse事件）来处理用于滚动的鼠标事件。Android浏览器宽度拉伸到iframe内容宽度，尽管溢出：隐藏

所有这一切都很好，除了一件事;即使被剪辑，它的内容也会扩展浏览器以匹配大小。这在高度上通常是显而易见的。

下面是简单的示例代码中的jsfiddle：http://jsfiddle.net/euKhG/

而这里的结果到Android浏览器中观看：http://jsfiddle.net/euKhG/embedded/result/（仅适用于Android浏览器！）。

有谁知道如何解决这个问题？我看过iScroll和其他地方的类似建议，但他们似乎用这样的遥控器src触摸框架。

来源

2012-04-12 Martijn

嗯，我想你错过了这里的东西。现在，您的iFrame会被切断，但不是由于您设置了溢出：滚动，也不是由于您设置了容器帧的宽度/高度属性;您目前看到的截止点完全是任意的。

为了证明这一点，在您的容器div中添加一个背景：＃ff0000，您将看到它确实不是div的宽度/高度，它定义了iframe的截止区域，而是一些“默认”iframe维度属性：http://jsfiddle.net/kauUr/

我的建议是，如果你说你的div是固定的尺寸，设置你的iframe与相同尺寸的宽度/高度属性，以便它匹配。你可以使用宽度和高度属性来做到这一点，或者更干净地使用css，就像你为容器div所做的一样。一旦你给了iFrame正确的宽度/高度，截断值应该与你期望的一致，并且浏览器不应该滚动到iframe内容的大小，而是滚动到你指定的尺寸。事实上，即使div的尺寸未提前知道，您也可以使用Javascript来获取它们，然后在运行时正确调整iFrame的大小。

<div style="width: 400px; height: 400px; overflow: scroll; background:#ff0000"> 
    <iframe style="width: 400px; height: 400px" src="http://doc.jsfiddle.net" frameborder="0" scrolling="no"></iframe> 
</div>

如果还是不行，请尝试在iframe风格拍打的overflow:none为好。

来源

2012-04-23 00:58:30

这不仅使得它的Android看起来更糟。 – Martijn 2012-05-22 09:01:43

尝试在meta标签

<meta id="viewport" name="viewport" content="initial-scale=1, user-scalable=no, width=device-width, target-densitydpi=160dpi"/>

设定目标densitydpi但你必须对所有其他的CSS对于改变这个问题，以及

来源

2012-09-13 11:22:00 Kraven

Android浏览器宽度拉伸到iframe内容宽度，尽管溢出：隐藏

回答

相关问题