3

我正在尝试在 Android（Dolphin 浏览器）中模仿桌面风格的 iframe，并取得了一些成功。使用的技巧是将<iframe>withposition:relative;放入<div>具有固定尺寸的 a 和overflow:hidden;中，然后使用 jQuery Mobile（或者更确切地说只是 vmouse 事件）来处理鼠标事件以进行滚动。

除了一件事，所有这些都很好；即使<iframe>被剪裁，它的内容也会拉伸浏览器以匹配大小。这在高度上很明显。

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

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

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

4

2 回答 2

2

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

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

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

于 2012-09-13T11:22:00.793 回答
0

嗯，我想你在这里错过了一些东西。现在你的 iFrame 被切断了，是的，但不是因为你设置了溢出：滚动，也不是因为你设置了容器框架的宽度/高度属性；您当前看到的截止值完全是任意的。

为了证明这一点，在你的容器 div 中添加一个 background:#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>​

如果这不起作用，请尝试overflow:none在 iframe 样式中添加一个。

于 2012-04-23T00:58:30.373 回答