iframe内的媒体查询，或不带框架的SCORM [英] Media queries within an iframe, or SCORM without frames
问题描述
我有一个响应式设计(使用媒体查询)的基于Web的培训(WBT)课程.默认情况下，出于可访问性等原因，此WBT不使用任何框架.
I have a responsively designed (using media queries) web based training (WBT) lesson. By default, this WBT does not use any frames, for accessibility concerns and etc.
但是，从SCORM LMS部署时，它使用充当框架集的文件进行SCORM通信.像这样:
However, when deployed from a SCORM LMS, it uses a file which acts as a frameset, for the SCORM communication. Like this:
<!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提交和终止命令.
This page connects to the SCORM API, and includes an onunload to send SCORM Commit and Terminate commands.
问题
通过移动浏览器查看此页面时，CSS媒体查询(在内容中)将被忽略，这与iframe本身的大小相同.这显然是不好的，因为所有媒体查询魔术现在都变得一文不值了.
When this page is viewed through a mobile browser, the CSS media queries (in the content) are ignored, as is sizing on the iframe itself. This is obviously bad, as all of the media query magic is now pretty worthless.
可能的解决方案
对此(我可以看到)的两种可能的解决方案是:
The two possible solutions to this (that I can see) are:
- 让媒体查询在iframe中运行.
- 在没有框架集的情况下启用SCORM通信.
可悲的是，这些解决方案似乎都不可行.关于如何在不使用框架的情况下保持与SCORM的通信的任何想法?或者，如何在iframe中使用媒体查询?
Sadly, neither of these solutions seem possible/feasible. Any ideas on how to maintain communication to SCORM without a framset? Or alternatively, how to get media queries working from within an iframe?
我研究的越深入，我认为解决方案2越可取.在移动设备上处理iframe似乎很痛苦.我在内容框架上使用了response.js(可以一直运行)，并且确实按预期工作，但是随后遇到了滚动问题.
The deeper I look into this, the more I think solution 2 is preferable. Dealing with iframes on mobile seems like all kinds of pain. I used respond.js (hacked to always run) on the content frame, and this did work as expected, but then I ran into issues with scrolling.
第三种解决方案可能是在LMS和WBT之间提供一个中间窗口.该窗口的消息为请勿关闭此窗口"，可以保留对SCORM API的引用.从用户体验的角度来看，它并不是那么优雅，但这似乎是这三种解决方案中最少的.
A 3rd solution may be to provide an intermediary window between the LMS and the WBT. This window, with a message to the effect of "Do not close this window" could hold the reference to the SCORM API. Not so elegant from a user experience perspective, but it does seem to be the least hacky of the 3 solutions.
推荐答案
我知道这已经很晚了，但是我想知道您是否尝试过在包含iframe/frameset的页面上的<meta>标签上设置视口设置:
I know that this is very late, but I wonder if you ever tried setting the viewport setting on the <meta> tag on the page containing the iframe/frameset:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
由于iframe&的方式，这可能不适用于iOS.处理帧(调整大小以适合内容)...
This may not work well with iOS due to the way that iframes & frames are handled (resizing to fit the content)...
这篇关于iframe内的媒体查询，或不带框架的SCORM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
