如何基於屏幕分辨率觸發html / php文件

Question

我正在開發一個wordpress響應式網站。 但現在我面臨着菜單問題。 請查看下面的圖片以進行導航。 在頂部的黑色欄“檢查我們的小鎮”上將具有下拉菜單，而在藍色欄上“ 關於我們”也具有下拉菜單

所以我想當屏幕分辨率在800以下時，頂層菜單和徽標部分會有所不同。 我知道一種方法，例如我可以制作單獨的標題部分，然后通過CSS隱藏它並通過CSS媒體查詢調用它。 為此，我需要始終將這些代碼保留在正文中。 但我不希望它只在需要時才在體內進行編碼。

說如果使頂部區域分開的html / php文件，如果我可以在屏幕分辨率為800/480等時調用它，那我會猜想。 我可以通過php / js實現，但我不知道如何。

看到圖像有兩個導航部分，一個是黑色區域，另一個是藍色區域。 當我將波紋管800像素時，它將是一個下拉菜單中的所有菜單。

屏幕分辨率低於800像素時，請參見下面的波紋管菜單，我要使用此類型

Answer 1

我不建議Ajax加載2個導航。 它添加了一個額外的http請求，這比僅向桌面和移動設備提供所需的一點額外標記要慢。

我認為使用媒體查詢是最好的方法。

這就是我想您要嘗試做的事情： http : //jsfiddle.net/krismeister/CNr5y/

相關部分是@media screen and (min-width:800px){

Answer 2

我認為實現此目標的唯一方法是使用Ajax。 將空白頁發送給客戶端，檢查窗口大小，並通過ajax請求內容，並以屏幕寬度作為參數。

Answer 3

我對jquery和json不太滿意。

$(function() {
    $.post('some_script.php', { width: 800px }, function(json) {
        if(json.outcome == 'success') {
           header-800px.php;
        } else {
            header.php;
        }
    },'json');
});

參考： 使用PHP獲取屏幕分辨率