title: Media queries within an iframe, or SCORM without frames
body: <p>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.</p>
  
  <p>However, when deployed from a SCORM LMS, it uses a file which acts as a frameset, for the SCORM communication. Like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Title of Course Here&lt;/title&gt;
          &lt;script src="../common/scripts/scorm.js"&gt;&lt;/script&gt;
  
          &lt;style&gt;
              html, body {margin:0; overflow:hidden; padding:0;}
              html, body, iframe {border:0; height:100%; width:100%;}
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;iframe src="index.htm" frameborder="0"&gt;
              iframes are not supported by your browser. 
              You can access the pages directly &lt;a href="index.htm"&gt;here&lt;/a&gt;.
          &lt;/iframe&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This page connects to the SCORM API, and includes an <code>onunload</code> to send SCORM Commit and Terminate commands.</p>
  
  <p><strong>The Problem</strong></p>
  
  <p>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.</p>
  
  <p><strong>Possible Solutions</strong></p>
  
  <p>The two possible solutions to this (that I can see) are:</p>
  
  <ol>
  <li>Get the media queries working within an iframe.</li>
  <li>Enable SCORM communication without a frameset.</li>
  </ol>
  
  <p>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?</p>
  
  <p><strong>Edit 1:</strong></p>
  
  <p>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.</p>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>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.</p>