Question

我目前正在使用jQuery根据浏览器宽度加载变量php布局。

function setLocation(url) {
   if (window.location.href.indexOf(url) === -1)
      window.location = url;
}

function reloadPage(width) {
    width = parseInt(width);
    if (width < 701) {
        setLocation("layout700.php");
    } else if (width < 900) {
        setLocation("layout900.php");
    } else {
        setLocation("layout1200.php");
    }
}

$(function() {
   reloadPage($(this).width());
   $(window).resize(function() {
       reloadPage($(this).width());
   });
});

我的问题：

Q1。是否有可能只用PHP实现这一点？如果是，怎么样？

Q2。我可以使用PLAIN JAVASCRIPT（没有jQuery，MooTools或其他库）这样做吗？如果是，怎么做？

我不想使用这些库，因为这是我模板中唯一的javascript函数，目前只是这样做我正在加载整个jQuery库。请帮忙。

当我只需使用CSS重新排列布局时，为什么要这样做呢？

我不想使用CSS属性#div { display:none }，因为问题是我的布局加载了很多图像和小部件。

我甚至尝试了响应式布局，但不幸的是，在小屏幕上几乎看不到某些图像细节。

使用css属性display:none，仍会加载未显示的内容，浪费大量带宽。让我们说移动浏览器加载1.5 MB的网站，然后隐藏1.2 MB的它？那可能不是一个好主意。

对于较小的浏览器，这些小部件没有任何意义，因此我想加载更轻的版本。

这就是我的想法。如果我错了，请随时纠正我，因为我在编程方面仍然是新手而且还处于学习阶段。

Answer 1

Q1。是否有可能只用PHP实现这一点？如果是，怎么样？

在某种程度上，您可以识别移动设备。但是，用户的屏幕分辨率在PHP中不可用。

Q2。我可以使用PLAIN JAVASCRIPT（没有jQuery，MooTools或其他库）这样做吗？如果是，怎么做？

是。事实上，它甚至可能更容易。这是相当于没有jQuery的代码：

function setLocation(url) {
   if (window.location.href.indexOf(url) === -1)
      window.location = url;
}

function reloadPage(width) {
    if (width < 701) {
        setLocation("layout700.php");
    } else if (width < 900) {
        setLocation("layout900.php");
    } else {
        setLocation("layout1200.php");
    }
}

var done = false;

function ready() {
    if(!done) {
        done = true;
        reloadPage(document.width);
    }
}

if(window.addEventListener) {
    window.addEventListener('DOMContentLoaded', ready, false);
    window.addEventListener('load', ready, false);
} else if(window.attachEvent) {
    window.attachEvent('onload', ready);
}

window.onresize = function() {
    reloadPage(document.width);
};

然而！您还可以使用媒体查询来重新设置页面，而无需进行流畅的布局。这有很多原因，更值得注意的是，您的布局不依赖于JavaScript和可能的粗略兼容性。 Here's a good tutorial.

使用javascript检测浏览器视口

1 个答案: