使用javascript檢測瀏覽器視口

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以及可能的粗略兼容性。 這是一個很好的教程。