2 HTML-Vorlagen für Mobile und Webdesign

Question

Entschuldigung, wenn diese Frage dumm ist, aber ich frage mich, wie ich es selbst lösen kann. Ich plane eine Website zu erstellen, die auf unterschiedliche Bildschirmgrößen reagiert. Um dies zu erreichen, würde ich eine HTML-Datei erstellen, 1 für das Web und die andere für das Handy. Das Design für einen größeren Bildschirm unterscheidet sich von einem kleineren Bildschirm. Meine Frage ist, wie kann ich erkennen, ob die App-Site auf dem Desktop oder auf dem Handy geöffnet ist, damit ich unterscheiden konnte, welche HTML-Vorlage ich rendern sollte? Jede Hilfe würde sehr geschätzt werden.

Answer 1

"Responsive" Webdesign bezieht sich auf ein einzelnes Layout, das sich je nach Bildschirmgröße mit CSS (oder manchmal Javascript) ändert.

Anstatt 2 HTML-Layouts zu erstellen, sollten Sie bei 1 bleiben und CSS verwenden, um zu helfen.

Chrck aus dieser Erklärung für weitere Einzelheiten: http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

Answer 2

Ich würde wirklich Rat einen CSS ansprechenden Rahmen wie bootstrap zu verwenden, anstelle von 2-Dateien trennt, nur dass die Aufrechterhaltung wird viel Zeit in Anspruch nehmen wegen zu müssen ändere den Code zweimal.

Allerdings, wenn Sie wollen immer noch, diesen Weg gehen Sie Javascript verwenden, um die Breite des Browsers zu erkennen und in Abhängigkeit des Ergebnisses haben Sie 2 Möglichkeiten

1. Redirect auf eine Sub-Domain wie m.domain. com
2. den hTML-Inhalt der Seite Ersetzen Sie für die Vorlage

für die erste Option wollen

if (document.body.clientWidth > 767) { 
    window.location = "http://m.yourdomain.com"; 
} 

für die zweite Option

if (document.body.clientWidth > 767) { 
    $('body').html(your template content here); 
}