HTML对象底部剪切,在移动设备上切断

时间:2017-05-11 18:47:43

标签: javascript jquery html css object

<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>

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

1 个答案:

答案 0 :(得分: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

的样式

希望这有助于你!