Блог

Главная - Вопросы по программированию - Сценарий встраивания с использованием div не реагирует / на весь экран

Сценарий встраивания с использованием div не реагирует / на весь экран

#html #iframe #embed

#HTML #iframe #Внедрить

Вопрос:

Новичок здесь, так что это довольно простой вопрос.

У меня здесь работает виртуальная фотобудка: 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>

Чего мне не хватает? Или это ограничение скрипта, которое вынуждает уменьшать область просмотра?

Заранее спасибо.

Ответ №1:

Причина в стиле браузеров по умолчанию. Вы можете исправить проблему со стилем:

*{margin:0; padding:0}

или

body {margin:0; padding:0}

Кроме того, вы можете использовать «Сброс CSS» и «нормализацию CSS»

Комментарии:

1. Спасибо, это сработало, чтобы избавиться от границы. Но скрипт / виджет по-прежнему не отображается в полноэкранном режиме при внедрении, как это происходит при запуске по собственной прямой ссылке. Просмотр исходного кода на исходной странице скрипта имеет: body{ max-width: 430 пикселей; Это вызывает мою проблему?

Ответ №2:

Я понял это. Добавление следующего кода решило мою проблему:

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