Question

我正试图在Android（Dolphin浏览器）中模仿桌面式iframe并取得一些成功。使用的技巧是将<iframe> position:relative;置于具有固定维度<div>的{{1}}内，然后使用jQuery Mobile（或者更确切地说只是vmouse事件）来处理鼠标滚动事件。

除了一件事之外，这一切都很好;即使overflow:hidden;被剪裁，它的内容也会延伸浏览器以匹配大小。这在高度上几乎是显而易见的。

以下是JSFiddle中的简化示例代码：http://jsfiddle.net/euKhG/

以下是在Android浏览器中观看的结果：http://jsfiddle.net/euKhG/embedded/result/（仅适用于Android浏览器！）。

有人知道如何解决这个问题吗？我在其他地方看过iScroll和类似的建议，但他们似乎用这样的远程<iframe>触摸帧。

Answer 1

尝试在元标记中设置target-densitydpi

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

但你必须改变所有其他的css

Answer 2

嗯，我觉得你错过了什么。现在你的iFrame被切断是，但不是因为你设置溢出：滚动，也不是因为你设置了容器框架的宽度/高度属性;你目前看到的截止是完全随意的。

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

我的建议是，如果你说你的div是固定尺寸，请设置你的iframe，其宽度/高度属性具有相同的尺寸，以便匹配。您可以使用width和height属性执行此操作，也可以使用css更干净地使用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。

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

2 个答案: