erkennen Browser-Viewport mit Javascript

Question

Ich benutze jQuery, um eine Variable PHP-Layout abhängig von der Browser-Breite zu laden.

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()); 
    }); 
}); 

Meine Fragen:

Q1. Ist es möglich, dies mit nur PHP zu erreichen? Wenn ja, wie?

Q2. Kann ich dies mit PLAIN JAVASCRIPT machen (keine jQuery, MooTools oder andere Bibliotheken) Wenn ja, wie?

Ich möchte diese Bibliotheken nicht verwenden, da dies die einzige JavaScript-Funktion in meiner Vorlage ist, und momentan lade ich gerade die gesamte jQuery-Bibliothek. Bitte helfen Sie.

Warum möchte ich das tun, wenn ich mein Layout einfach mit CSS neu anordnen kann?

Ich möchte nicht die CSS-Eigenschaft #div { display:none } verwenden, da das Problem ist, dass meine Layouts mit sehr vielen Bildern und Widgets geladen werden.

Ich habe sogar versucht, ein responsives Layout, aber leider einige der Bilddetails sind kaum sichtbar in kleinen Bildschirmen.

Mit der css-Eigenschaft display:none wird immer noch der nicht angezeigte Inhalt geladen, wodurch eine Menge Bandbreite verschwendet wird. Sagen wir mal für einen mobilen Browser, 1.5 MB Site zu laden und dann 1.2 MB davon zu verstecken ???? Nun, das ist vielleicht keine gute Idee.

Für kleinere Browser machen diese Widgets keinen Sinn, daher würde ich eine leichtere Version desselben laden wollen.

Das ist, was ich denke. Bitte zögern Sie nicht mich zu korrigieren, wenn ich falsch liege, da ich immer noch Anfänger bin, wenn es um Programmierung geht und ich bin immer noch in der Lernphase.

Answer 1

Q1. Ist es möglich, dies mit nur PHP zu erreichen? Wenn ja, wie?

In gewissem Umfang können Sie mobile Geräte identifizieren. Die Bildschirmauflösung eines Benutzers ist in PHP jedoch nicht verfügbar.

Q2. Kann ich dies mit PLAIN JAVASCRIPT machen (keine jQuery, MooTools oder andere Bibliotheken) Wenn ja, wie?

Ja. In der Tat könnte es sogar einfacher sein. Hier ist das Äquivalent Ihres Codes ohne 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); 
}; 

Allerdings! Sie können auch Medienabfragen verwenden, um Ihre Seite neu zu formatieren, ohne ein flüssiges Layout zu erstellen. Dies ist aus vielerlei Gründen besser, vor allem, weil Ihr Layout nicht von JavaScript und möglicherweise von komplizierter Kompatibilität abhängig ist. Here's a good tutorial.