【问题标题】: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>

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

【问题讨论】:

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

标签: javascript jquery html css object


【解决方案1】:

试试这个:

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

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

希望这对您有所帮助!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-04
    • 2017-10-06
    相关资源
    最近更新 更多