Question

我有3列：左中右，当@media屏幕maxwidth小于768px时，想要放弃加载左侧。

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

我不想使用display：none来隐藏列，但是为了防止它被加载，所以它不必运行可能减慢速度的服务器代码。

最好的方式是什么？

Answer 1

CSS无法阻止加载常规HTML内容，服务器也无法知道媒体查询是否匹配。

您可以使用JavaScript（window.matchMedia("only screen and (min-width: 480px)")）获取匹配的媒体查询，然后从服务器加载您想要的内容（使用AJAX，或导航到URL，例如，？screen-width = 1024附加到它。）

它不优雅，它非常丑陋且根本不是动态的（除非你为每个页面加载检查这个，如果查询字符串与匹配此会话的媒体查询不匹配，则更改查询字符串并重新加载页面），但它应该工作。

Answer 2

您无法从服务器检测客户端的页面宽度。

如果您想要服务器到div，那么您首先需要调用一个捕获屏幕宽度的页面，然后在页面请求中将其传递给服务器：

示例javascript（使用JQuery）：

window.location.href = 'www.site.com/mypage.php?page_width=' + $(window).width();

然后可以通过$_GET['page_width']

在php中访问

或者你可以在JavaScript中完成整个过程，这将是一种很好的动态处理方式，它也会考虑在页面使用过程中调整浏览器窗口的大小。

我强烈建议使用像JQuery这样的库，因为它使你的代码更整洁，非常强大。这可以使用以下代码行完成:(对于Web连接的站点，如果是本地使用，则需要在本地下载文件）

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

然后插入以下代码就是一件简单的事情：

$(function(){
    if($(window).width() < 768){
        $('div.left').hide();
    }
});

$(function(){ });在页面加载后运行代码。

如果您希望它在页面调整大小时也能正常工作，那么您可以将其放入函数

中

function checkSize(){
    if($(window).width() < 768){
        $('div.left').hide();
    }else{
        $('div.left').show();
    }

}

并在加载页面和调整屏幕大小时调用它，如下所示：

$(function(){
    checkSize();
});

$( window ).resize(function() {
    checkSize();
});

Answer 3

它不是很优雅，但你可以将整个div作为字符串并将其放在脚本块中的if语句中。这样你检查窗口大小，如果它不够大，它只是跳过所有的HTML：

    <script>
      if ($(window).width() > 768) {
        $("body").prepend("<div class='left'> Whatever stuff is in your div </div>");
      }
    </script>

如何防止加载html结构？

3 个答案: