0

縦向きのコンテンツや横向きのその他のインタラクティブ機能にアクセスできるクロスプラットフォーム Web アプリを作成しています。これらは、実際には 2 つの異なる HTML 5 アプリになります。

index.html に 2 つの div が必要です。1 つは content/index.html をロードし、もう 1 つは interactive/index.html をロードします。

インタラクティブは縦向きで非表示になり、コンテンツは横向きで非表示になります。

これを達成するために jQuery load() メソッドを使用することは可能ですか? 向きが変わるたびに、ユーザーが各ビューで中断した場所に戻ることができるように、両方をロードする必要があります。

次のようなものは機能しますか？

/* show portrait content only */
/* hide it landscape content */

@media screen and (min-device-width: 0px) and (max-device-width: 768px) and (orientation: portrait) {
  #content { display: block; } 
  #interactive { display: none; }
}


/* show landscape content only */
/* hide portrait content */

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  #content { display: none; }
  #interactive { display: block; }   
}



<div id="content"></div>
<script type="text/javascript">
$(function()
{
        $("#content").load("content/index.html");
});
</script>

<div id="interactive"></div>
<script type="text/javascript">
$(function()
{
        $("#interactive").load("interactive/index.html");
});
</script>
4

2 に答える 2

0

表示されているかどうかをチェックし、適切なロードをトリガーする 1 つの JQuery 関数はどう#contentでしょ#interactiveうか?

その上で、可能であれば向きの変更にバインドしてみてください

ここに関連する良い答えがあります：https://codereview.stackexchange.com/a/11701

そしてここ：https://stackoverflow.com/a/2323338/1821473

于 2012-12-19T04:10:12.277 に答える
0

これがほとんどのブラウザでサポートされているのはどうですか?

$(document).ready(

    function() {

        var screenX = screen.width,
            screenY = screen.height;

        if (screenX == 768 && screenY == 1024) {
            $('div#interactive').css('display','none');
        }

        else if (screenY == 768 && screenX == 1024) {
            $('div#content').css('display','none');
        }
    }
);


<div id="content">
<script type="text/javascript">
$(function()
{
        $("#content").load("content/index.html");
});
</script></div>

<div id="interactive">
<script type="text/javascript">
$(function()
{
        $("#interactive").load("interactive/index.html");
});
</script></div>
于 2012-12-19T15:48:09.000 に答える