UI der Produktliste basierend auf der Bildschirmgröße

Question

Ich benutze Magento (HTML, PHP, Js) und möchte die Produktliste Seite basierend auf Bildschirmgröße zu ändern. Das aktuelle Design ist reaktionsschnell, aber ich muss Karten in großen Bildschirmen verwenden und etwas ganz anderes als Karten in kleinen Bildschirmen. Produkte sind in Array/Sammlung und ich habe eine For-Schleife, um Produktattribute anzuzeigen. Ich suche etwas anderes als CSS-Medienabfragen wie

Wenn Bildschirm klein ist // Anzeigeliste Else // Verwendung Karten

Gibt es eine Methode in PHP-Bildschirmgröße zu erkennen? Ist es ein gute Praxis, es zu benutzen? Was ist, wenn die Größe der Browseransicht geändert wird?

Answer 1

Was Sie versuchen, ist nur erreichbar mit Javascript oder css. PHP ist eine serverseitige Sprache und wird kompiliert vor es erreicht den Client. Das bedeutet, dass das PHP-Skript alles über den Computer/Browser Ihres Clients nicht kennt, ohne HTTP-Protokolle zu verwenden.

Die praktischste Lösung für dieses Szenario wäre die Verwendung von Medienabfragen, da sie unter den Browsern am meisten unterstützt werden. In der Tat sind sie sehr einfach zu bedienen. Im Beispiel unten, öffnen Sie den Code-Schnipsel in voller Seite, die Größe des Fensters, und beobachten, wie sich die beiden Boxen auf die Größe des Bildschirms reagieren:

/* Standard Appearace */ 
 

 
.box { 
 
    display: inline-block; 
 
    width: 49%; 
 
} 
 

 

 
/* Mobile Appearance */ 
 

 
@media only screen and (max-width: 700px) { 
 
    .box { 
 
    display: block; 
 
    width: 100%; 
 
    } 
 
} 
 

 

 

 

 
/* Ignore: Irrelevant CSS */ 
 

 
.box { 
 
    height: 50px; 
 
    color: white; 
 
} 
 

 
.box:first-child { 
 
    background-color: red; 
 
} 
 
.box:nth-child(2) { 
 
    background-color: blue; 
 
}

<div class="box">Box 1</div> 
 
<div class="box">Box 2</div>

Wenn Sie wirklich wollen Finger weg von Media-Abfragen, könnten Sie window.availWidth verwenden, um die Breite des Fensters zu erhalten, von wo aus Sie if Anweisungen schreiben können, um Ihren Inhalt anzupassen.