使用javascript检测浏览器视口 - detect browser viewport using javascript

detect browser viewport using javascript

我目前正在使用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？？？？这可能不是个好主意。

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

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

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，而且可能有粗略的兼容性。这是一个很好的教程。