1

我有一个响应式设计（使用媒体查询）基于网络的培训（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 本身的大小也是如此。这显然很糟糕，因为所有的媒体查询魔法现在都毫无价值。

可能的解决方案

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

  1. 让媒体查询在 iframe 中工作。
  2. 在没有框架集的情况下启用 SCORM 通信。

可悲的是，这些解决方案似乎都不可行/不可行。关于如何在没有框架的情况下保持与 SCORM 的通信的任何想法？或者，如何让媒体查询在 iframe 中工作？

编辑1：

我研究得越深入，我就越认为解决方案 2 更可取。在移动设备上处理 iframe 似乎是各种痛苦。我在内容框架上使用了response.js（被黑客入侵以始终运行），这确实按预期工作，但后来我遇到了滚动问题。

编辑2：

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

4

3 回答 3

1

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

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

由于 iframe 和框架的处理方式（调整大小以适应内容），这可能不适用于 iOS...

于 2014-02-17T22:10:30.647 回答
0

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

于 2012-10-12T00:03:07.427 回答
-1

我遇到了同样的问题，只需将此代码放在 html 页面的头部并享受... 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0,     user-scalable=yes">
于 2014-06-06T11:29:40.063 回答