使用 div 嵌入脚本无响应/全屏答案

【问题标题】：Embeding script using div not responsive / full screen使用 div 嵌入脚本无响应/全屏
【发布时间】：2020-11-18 05:20:00
【问题描述】：

这里是初学者，所以这是一个非常基本的问题。

我在这里运行了一个虚拟照相亭：https://verve.vbooth.me/booth/kL0e1N6Y，应用程序根据需要全屏运行。

提供的嵌入代码为：

<div id="vb-kL0e1N6Y"  style="height: 600px"></div>
<script src="https://app.virtualbooth.me/embed/kL0e1N6Y"></script>
<script>PhotoBooth.initWidget("vb-kL0e1N6Y", "kL0e1N6Y");</script>

当我以 100% 的高度运行它时，它不会最大化： https://virtualbooth.ie/demo1/

使用非常基本的代码：

<html>  
    <head> 
        <title>Test Photobooth</title>
    </head> 
    <body>
        <div id="vb-kL0e1N6Y"  style="height: 100%"></div>
        <script src="https://app.virtualbooth.me/embed/kL0e1N6Y"></script>
        <script>PhotoBooth.initWidget("vb-kL0e1N6Y", "kL0e1N6Y");</script>
    </body>
</html>

我错过了什么？还是脚本的限制迫使视口变小？

提前致谢。

【问题讨论】：

标签： html iframe embed

【解决方案1】：

原因是浏览器的默认样式。您可以通过样式解决问题：

*{边距：0;填充：0}

或

主体{边距：0;填充：0}

另外，你可以使用'CSS reset'和'CSS normalize'

【讨论】：

谢谢，这有助于摆脱寄宿生。但是脚本/小部件在嵌入时仍然不会像在自己的直接链接上运行时那样全屏显示。在脚本原始页面上查看源代码，有：body{ max-width: 430px;这会导致我的问题吗？

【解决方案2】：

我想通了。添加以下代码解决了我的问题：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

【讨论】：