使用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？如果是，如何？ Q2302。我可以使用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.