Question

我正在创建一个跨平台的Web应用程序，该应用程序将允许以纵向和其他交互式功能访问横向内容。这些实际上是两个不同的HTML 5应用程序。

我想在index.html上有两个div。一个将加载content / index.html和另一个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>

Answer 1

1个JQuery函数如何检查#content或#interactive是否可见，然后触发相应的加载？

除此之外，请尝试binding to the orientation change if possible

这里有一个很好的相关答案：https://codereview.stackexchange.com/a/11701

在这里：https://stackoverflow.com/a/2323338/1821473

Answer 2

大多数浏览器都支持这个？

$(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>

在不同的div / show＆amp;中加载不同的隐藏媒体查询

2 个答案: