- webkit-flex wird auf Android nicht richtig angezeigt
Nachdem ich die wunderbaren Fähigkeiten von display:flex erkannt habe, habe ich eine Webseite erstellt, die genau so aussieht, wie ich es möchte, wenn sie in Chrome 26 unter Windows angezeigt wird. Es funktioniert jedoch weder in Chrome 26 auf meinem Android noch funktioniert es im Android-Browser 4.1 in meinem Emulator. Laut caniuse sollten alle diese Browser dies unterstützen.
Vielleicht erscheint die Art und Weise, wie es in Android aussieht (so weit ich das beurteilen kann), genauso, wie es aussieht, wenn ich zur älteren Version display:box wechsle.
So sieht es in Windows vs. Android aus:
Meine Frage ist, wie kann ich diese geräteübergreifenden Probleme verhindern? Vielleicht wäre es besser, etwas anderes als Flex zu verwenden, bis es standardmäßiger wird. Kann mir jemand ein funktionierendes Beispiel liefern, das nicht flex verwendet oder das auf Android funktioniert? Dies ist für eine mobile Web App. Jede Hilfe wird sehr geschätzt. Links zu meinem Code sind unten.
Mit -webkit-flex: JSFiddle
Mit Box: JSFiddle
2 Antworten
Für die Neugierigen habe ich meinen Code komplett neu geschrieben, um keinen Flex zu verwenden. Hier ist ein Link zum JSFiddle, der für meine Zwecke gut funktioniert. Ссылка
Es verwendet box und box-ordinal-group wie von @cimmanon vorgeschlagen.
Es gibt 3 Flexbox-Entwürfe mit verschiedenen zu beachtenden Eigenschaften / Werten. Caniuse unterscheidet nur zwischen Browsern, die den aktuellen Entwurf unterstützen ("Support") und denen, die einen der älteren Entwürfe unterstützen ("partielle Unterstützung").
Um die Browserunterstützung zu maximieren, fügen Sie einfach alle von der ältesten zur neuesten Version hinzu.
%Vor%Während alle Android-Versionen derzeit die alten 2009-Eigenschaften unterstützen, werden sie wahrscheinlich in Zukunft zugunsten der Standardeigenschaften fallen gelassen. Beachten Sie auch, dass Blackberry 10 den aktuellen Standard unterstützt und nicht einen der alten Entwürfe.