1

レスポンシブ デザイン (メディア クエリを使用) の Web ベース トレーニング (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 に接続し、onunloadSCORM コミットおよび終了コマンドを送信するための が含まれています。

問題

このページをモバイル ブラウザーで表示すると、(コンテンツ内の) CSS メディア クエリは無視され、iframe 自体のサイズも無視されます。これは明らかに悪いことです。なぜなら、メディア クエリのすべての魔法は今ではほとんど役に立たないからです。

可能な解決策

これに対する2つの可能な解決策（私が見ることができる）は次のとおりです。

  1. iframe 内で動作するメディア クエリを取得します。
  2. フレームセットなしで SCORM 通信を有効にします。

残念ながら、これらの解決策はどちらも可能/実行可能ではないようです。フレームセットなしでSCORMへの通信を維持する方法についてのアイデアはありますか? または、iframe 内からメディア クエリを動作させる方法を教えてください。

編集1：

これを詳しく調べれば調べるほど、解決策 2 が望ましいと思います。モバイルで iframe を扱うのは、あらゆる種類の苦痛のように思えます。コンテンツフレームでrespond.js（常に実行するようにハッキング）を使用しましたが、これは期待どおりに機能しましたが、スクロールで問題が発生しました.

編集2：

第 3 の解決策は、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

2 番目のオプションは機能し、タイマーを使用して 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 に答える