Ich habe die typische Art und Weise verfolgt, wie ein Formular in einer Anwendung eingerichtet wurde, nämlich eine Tabelle, die folgendermaßen aussieht:
%Vor%Was erzeugt ein Format wie:
%Vor%Die meisten mobilen Designs legen es so aus:
%Vor%Dies ist etwas, was ich tun muss, weil einige meiner Formulare zu lang sind, um in einem mobilen Browser angezeigt zu werden. Gibt es eine einfache Möglichkeit, dies einzurichten? Vielleicht gibt es eine Möglichkeit, jede Zelle in einer neuen Zeile rendern zu lassen, was für mich funktionieren würde? Etwas Cross-Browser unterstützt?
Oder ist ein Redesign notwendig?
Danke.
Normalerweise mache ich Markup als Liste (welcher Typ hängt von den Bedürfnissen ab) oder eine Reihe von divs. Grundsätzlich hat jedes Feld ein enthaltendes Element. Für ein einfaches Beispiel werde ich hier ein div verwenden, aber das ist normalerweise das enthaltende Element des letzten Ausweges für mich:
%Vor%Das ist wirklich das Beste, weil das Markup zumindest etwas semantischer ist und uns eine Menge Möglichkeiten bietet.
Gestapelte Beschriftungen:
%Vor%Etiketten mit fester Breite:
%Vor%Mit dieser Markierung erhalten Sie auch ziemlich einfach 2-up-Felder
Auszeichnung:
%Vor%CSS
%Vor%Sie erhalten die allgemeine Idee. Wenn Sie dies auf diese Weise tun und bei Bedarf reale Breiten verwenden, können Sie das Formular vollständig ansprechen.
Wenn Sie möchten, dass Ihre Website für Mobilgeräte optimiert ist, gibt es wenige Dinge, die Sie vermeiden sollten. Sie können Tabellen nicht verwenden, da sie mit einer festen Breite erstellt wurden, so dass sie in kleineren mobilen Geräten nicht korrekt angezeigt werden. Verwenden Sie auch relative Positionen in css.Wenn Sie ein anderes Layout erstellen möchten, verwenden Sie die @media-Abfrage. Oder verwenden Sie jquerymobile, um interaktives Design zu entwerfen.
Benutze eine Tabelle. Es ist der einzige Ansatz, mit dem Sie das Formular auf eine adaptive Weise anzeigen lassen können, so dass die Etiketten nur die Breite haben, die die längste benötigt. Eine Tabelle wird automatisch gerendert, und Sie können sie leicht anpassen.
Es funktioniert auch auf mobilen Geräten, wenn die Etiketten so kurz sind, wie sie sein sollten. Displays für mobile Geräte sind nicht so eng, dass sie keine Beschriftung wie "Stadt" und ein 15 Zeichen breites Eingabefeld aufnehmen können. Wenn in einigen Fällen Probleme auftreten, können Benutzer mit ihnen umgehen, da sie überall auf ähnliche Probleme stoßen; Sie können zum Beispiel das Gerät um 90 Grad drehen.
Tags und Links html css mobile responsive-design web