Похоже, что SCORM не реагирует на мобильное окно просмотра при вставке в iframe - PullRequest
Новая
       42

Похоже, что SCORM не реагирует на мобильное окно просмотра при вставке в iframe

0 голосов
/ 01 апреля 2020

Мы получили SCORM от клиента, и мы должны отобразить его на нашем веб-сайте.

При самостоятельном открытии scorm в браузере (имеется в виду, начиная с индекса. html файл) все кажется нормальным (полностью отзывчивый).

В то время как при его открытии на нашем веб-сайте (размещение содержимого в iframe) содержимое пакета SCORM перестает отвечать на запросы (слишком маленький размер шрифта)

Вы можете увидеть проблему здесь

Какой-то код 

 <div class="row-container" data-bind="with: pillola">
        <div class="first-row">
            <!--go back button-->
            <p class="ml-3 mt-3" id="go_back"><a href="Index.html">&lt; Back</a></p>
        </div>
        <div class="second-row">
            <iframe id="pill_video" data-bind="attr: {src: '../Content/Pills/' + encodeURIComponent(FolderName) + '/scormcontent/index.html' }" src="../Content/Pills/XiaomiTest/scormcontent/index.html"> </iframe>
        </div>
    </div>

CSS для страницы 

/*iframe height fix*/
body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0
}

.first-row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
}

.second-row {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
}

    .second-row iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
    }

Примечание: Я также попытался сделать так, чтобы iframe соответствовал полному размеру родительского div, используя другие методы (в основном каждый метод в принятом ответе, каждый из которых дает у меня такая же проблема с размером шрифта)

1 Ответ

0 голосов
/ 02 апреля 2020

Верхняя страница также должна реагировать.

Установить мета области просмотра на верхней странице:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

...