Android浏览器宽度被拉伸到iframe内容宽度，尽管overflow:hidden。

Question

我正在尝试在Android（Dolphin浏览器）中模拟桌面风格的iframe，取得了一些成功。使用的技巧是将一个带有position:relative;的

- Martijn

Answer 1

尝试在meta标签中设置target-densitydpi

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

但是你还需要相应地更改所有其他的CSS样式

- Kraven

Answer 2

嗯，我认为你在这里漏掉了一些东西。现在你的iFrame被裁剪了，但不是因为你设置了overflow:scroll，也不是因为你设置了容器框架的宽度/高度属性；你当前看到的截断是完全任意的。

为了证明这一点，请将背景：#ff0000添加到您的容器div中，您会发现真正定义iframe截断区域的不是div的宽度/高度，而是一些“默认”的iframe尺寸属性：http://jsfiddle.net/kauUr/。

我的建议是，考虑到您说您的div具有固定的尺寸，因此使用与其相同尺寸的宽度/高度属性设置您的iFrame，以便匹配。您可以使用width和height属性来实现这一点，或者更干净地使用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。

- Authman Apatira

---

这只会让Android看起来更糟。 - Martijn