HTML 对象底部裁剪，在移动设备上被截断

【问题标题】：HTML Object bottom-clipped, cut off on mobileHTML 对象底部裁剪，在移动设备上被截断
【发布时间】：2017-10-10 22:17:04
【问题描述】：

<div data-role="page" id="samples">
	<div data-role="header" data-position="fixed"><a href="#ceremony" data-icon="back">Back</a><h1>Ceremony Planner 2.0 - Samples</h1></div>
	<object type="text/html" data="http://www.thereverendmichael.com/ceremony-samples"></object>
</div>

该对象在所有浏览器上都可以滚动并正常工作，但在移动设备上不会滚动，它会被截断并被截断。谁能告诉我如何解决这个问题？

【问题讨论】：

为什么不使用<iframe> 而不是<object>？我认为这是最好的选择。你试过吗？查看here 以了解<iframe>、<object> 和<embed> 标签之间的区别。也许对你有帮助。
我也尝试过<iframe>，但结果相同。
你把视口放在<head>里面了吗？ <meta name=viewport content="width=device-width, initial-scale=1">
是的，我已经确保这样做了

标签： javascript jquery html css object

【解决方案1】：

试试这个：

首先：确保将视口放在<head> 中，例如 <head><meta name=viewport content="width=device-width, initial-scale=1"></head>
使用<iframe> 代替<object>
为<iframe>添加一个包装器并添加以下样式

html

<div class="wrap">
    <iframe src="http://www.thereverendmichael.com/ceremony-samples"></iframe>
</div>

css

.wrap {
    // -webkit-overflow-scrolling: touch; Non-standard! 
    overflow-y: scroll;
}

来源：https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

如果它不起作用，请取消注释其他样式，尽管我看到了文档并且不建议使用它see here。

但是这里有效：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe 你可以看到适用于#iframewrapper 的样式观看view-source（浏览器中的ctrl+u）并寻找#iframewrapper

希望这对您有所帮助！

【讨论】：