jquery - 在单独的 div 中加载不同的内容/使用媒体查询显示和隐藏

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，然后触发适当的负载？

除此之外，如果可能，请尝试绑定到方向更改

这里有一个很好的相关答案：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>