作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 jQuery Mobile 库。我正在显示一个 IFrame,如下所示:
<iframe width="100%" height="600" frameborder="0" title="Content" src="https://c.na6.content.force.com/servlet/servlet.FileDownload?file=00P8000500D26o6EAB" name="docframe" id="docframe"></iframe>
在桌面浏览器上查看时,iFrame 占据了我希望的整个宽度。在 iPad 上,iFrame 似乎占据了大约 50% 的可用空间。 iFrame 似乎不包含在任何将其大小限制为 50% 的内容中(即,它似乎不位于网格等中...)
我应该尝试哪些类型的操作才能使 iFrame 变为全宽?
最佳答案
这是一个可能有帮助的替代方案:
<head>
<script type="text/javascript">
function jqUpdateSize(){
// Aspect ratio of the video's height and width. For eg: 360/480
var aspect_ratio = <height of the video>/<width of the video>;
// Get the dimensions of the content div
var width = $('#iframes-div-container').width();
var height = width * aspect_ratio;
$('#video-iframe').css("width",width);
$('#video-iframe').css("height",height);
};
$(document).ready(jqUpdateSize); // When the page first loads
$(window).resize(jqUpdateSize); // If the browser's size changes
</script>
</head>
<body>
<div data-role='page'>
.
.
<your code>
.
.
<div data-role="content" id="iframes-div-container">
<center>
<iframe id="video-iframe" src="https://c.na6.content.force.com/servlet/servlet.FileDownload?file=00P8000500D26o6EAB" frameborder="0" allowfullscreen></iframe>
</center>
</div>
</div>
</body>
希望这有帮助。
关于jquery - 如何在 iPad 上使用 jQuery Mobile 让 IFrame 占据整个宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12082864/
我是一名优秀的程序员,十分优秀!