Question

我有一个响应式设计（使用媒体查询）网络培训（WBT）课程。默认情况下，此WBT不使用任何框架，可访问性问题等。

但是，从SCORM LMS部署时，它使用一个充当框架集的文件进行SCORM通信。像这样：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title of Course Here</title>
        <script src="../common/scripts/scorm.js"></script>

        <style>
            html, body {margin:0; overflow:hidden; padding:0;}
            html, body, iframe {border:0; height:100%; width:100%;}
        </style>
    </head>
    <body>
        <iframe src="index.htm" frameborder="0">
            iframes are not supported by your browser. 
            You can access the pages directly <a href="index.htm">here</a>.
        </iframe>
    </body>
</html>

此页面连接到SCORM API，并包含onunload以发送SCORM提交和终止命令。

问题

当通过移动浏览器查看此页面时，将忽略CSS媒体查询（在内容中），以及iframe本身的大小调整。这显然很糟糕，因为现在所有的媒体查询魔法都毫无价值。

可能的解决方案

这两个可能的解决方案（我可以看到）是：

在iframe中获取媒体查询。
启用没有框架集的SCORM通信。

修改1：

我越深入研究，我认为解决方案2越多越好。在移动设备上处理iframe似乎是各种各样的痛苦。我在内容框架上使用了respond.js（黑客总是运行），这确实按预期工作，但后来我遇到滚动问题。

编辑2：

第三种解决方案可以是在LMS和WBT之间提供中间窗口。此窗口带有“不要关闭此窗口”效果的消息，可以保存对SCORM API的引用。从用户体验的角度来看，这并不是那么优雅，但它似乎是3种解决方案中最不实用的。

Answer 1

我知道这已经很晚了，但我想知道您是否尝试在包含iframe / frameset的页面上的<meta>标记上设置视口设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">

由于iframes＆amp; amp;的方式，这可能不适用于iOS。处理帧（调整大小以适应内容）......

Answer 2

第二个选项将起作用，您可以使用计时器将LMSset（）发送到API。一些新浏览器（如Chrome）在onunload上遇到问题。计时器解决了它。

Answer 3

我正面临同样的问题，将此代码放在html页面的头部并享受...

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0,     user-scalable=yes">

iframe内的媒体查询，或没有框架的SCORM

3 个答案: