iframe 不会全屏显示

Question

正如标题所说，我无法拥有全屏 iframe。

代码如下：

<div data-role="page" id="p'+item.id+'"><div data-role="header" style="background-color: #FFFFFF;border:none;" data-position="fixed"><a href="#" onClick="location.href=\'documenti.html\'" data-role="button" data-icon="back" data-iconpos="notext" class="ui-btn-left">Home</a><img src="images/app/logo.png" id="navImg"/></div><iframe src="https://docs.google.com/gview?embedded=true&url=http://' + item.path + '" width="100%" height="100%" align="center" ></iframe></div>

演示：https://jsfiddle.net/579sxg8s/

Answer 1

您可以将此添加到您的第一个 div 元素：

style="width: 100vw; height: 100vh;"

将 div 的高度和宽度设置为 viewportheight / viewportwidth

的 100%

由于您已经将 iframe 的高度和宽度设置为 100%，它将继承其包含元素的大小，因此将 div 的高度和宽度设置为视口高度，视口宽度，iframe 将在宽度和高度上填充 100% space。

已更新 fiddle 此处：https://jsfiddle.net/john_h/579sxg8s/2/

iframe 不会全屏显示

Iframe not going full screen

html

iframe

fullscreen