Was ist besser Ansatz, um mobile Elemente in HTML zu behandeln?

Question

Ich muss eine mobile Version einer großen Website machen und die Elemente Bestellungen und Inhalte sind sehr unterschiedlich. So kann ich Elemente in HTML hinzufügen und display: keine, auf dem Desktop, mit bestimmten Stilen für mobile Geräte, oder ich kann neue Elemente in JS hinzufügen, wenn ich neue Elemente kiste kann ich leicht leichte mobile Version machen und Elemente für den Desktop hinzufügen , aber wenn ich großen HTML-Code für mobile und Desktop-Versionen anlege, kann es auch nicht gut sein. Also, was ist der richtige Weg, dies zu tun?

EDIT: Es gibt einen großen Unterschied im Layout, also muss ich viele Elemente in HTML oder JS hinzufügen, und ich frage nach besseren Weg. Ich weiß, wie man damit umgeht, aber was ist ein besserer Ansatz und warum? Es mag eine andere Möglichkeit geben, mit dieser Situation umzugehen, also sag mir, wenn du es weißt.

P.S. Ich weiß, dass diese Frage vorher beantwortet werden muss, aber es ist schwer, Antworten auf diese Art von Fragen zu finden.

Answer 1

Wenn der Layout-Unterschied nicht sehr groß ist, dann können Sie die mobilen freundlichen (Responsive) Frameworks verwenden. Aber wie Sie sagen, dass die "Inhalt sind sehr unterschiedlich" was bedeutet, dass Sie mit verschiedenen DOM insgesamt oder nur ein anderes CSS basierend auf der Komplexität der Ansicht gehen müssen.

Darüber hinaus können Sie zwei parallele Ansichten mit gemeinsamen Inhalten haben, die basierend auf der Medienabfrage ein- oder ausgeblendet werden. Aber dann müssen Sie sich mit dem Problem von mehreren Ereignissen, redundantem Code und verschiedenen Auflösungen des Handys auseinandersetzen. Also die Wahl liegt bei dir.

Update: - Wenn also die Unterschiede in der mobilen und Desktop-Ansicht zu groß sind, dann bittet es von Natur aus um zwei verschiedene Ansichten (Seiten). Ich würde zunächst eine leere Zielseite laden und dann feststellen, ob der Browser mobil ist oder nicht, und dann mit JavaScript weiterleiten. Wenn Sie mit jQuery, so etwas wie ..

$(document).ready(function() {  
    var isMobile = window.matchMedia("only screen and (max-width: 760px)"); 

    if (isMobile.matches) { 
     //Conditional script here 
    } 
}); 

Während auch dem Benutzer eine Option geben Ansicht zu ändern, wenn sie so denken.

Auch ich würde improvisiert weiter durch Ajax mit der jeweiligen Ansicht in das DOM zu laden, anstatt umgeleitet, die ich bereits in meiner aktuellen apps bin die Umsetzung und kann sagen, dass die Endbenutzer zufrieden sind :)

Und schließlich, es gibt keinen "richtigen Weg", der für alle Szenarien funktioniert, Sie müssen Ihre Optionen abwägen und entscheiden.

Answer 2

Wenn Mobile und Desktop geringfügige Änderungen aufweisen, können Sie display none verwenden. Sie können CSS-Framework wie Bootstrap verwenden.

Answer 3

Sie einfach Bootstrap für mobile freundliche Websites verwenden können, da es viel einfacher sein wird, die die meisten der HTML-Elemente oder den anderen Weg zu handhaben ist Elemente zu verwenden, die verstecken sich in Desktop oder mobil sein kann wie pro & Mediennutzung erforderlich Abfragen, um damit umzugehen

Answer 4

Um ansprechende CSS zu machen @media seinem Stand für die Suche nach Medien und wie pro Sie Sie in mobilen neues Element müssen dann gefragt, stattdessen Element versteckt und nur enquire.js