Media queries within an iframe, or SCORM without frames

问题

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.

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>

This page connects to the SCORM API, and includes an onunload to send SCORM Commit and Terminate commands.

The Problem

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.

Possible Solutions

The two possible solutions to this (that I can see) are:

Get the media queries working within an iframe.
Enable SCORM communication without a frameset.

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?

Edit 1:

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.

Edit 2:

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.

回答1:

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">

This may not work well with iOS due to the way that iframes & frames are handled (resizing to fit the content)...

回答2:

The second option is going to work and you can use a timer to send LMSset() to the API. Some new browsers, like Chrome, have problems with onunload. The timer solved it.

回答3:

I was facing the same issue jst place this code in head of html page and enjoy...

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

来源：https://stackoverflow.com/questions/12715095/media-queries-within-an-iframe-or-scorm-without-frames

标签

css

iframe

media-queries

scorm