CSS für unterschiedliche Betriebssysteme und –versionen in Cordova

Wenn ich gefragt werde, wo ich die Hauptschwierigkeit beim Entwickeln von plattformübergreifenden Anwendungen sehe, dann muss ich sagen, ist das für mich eindeutig CSS. Das Problem liegt weniger in den unterschiedlichen Displaygrößen als vielmehr in den unterschiedlichen Interpretationen der verschiedenen Browser.

Cordova bietet eine Möglichkeit für unterschiedliche Plattformen individuelle Dateien zu mergen, siehe «Customize Each Platform».

Aber ich nutze es nicht, da ich die Build-Funktion von Cordova nicht nutze und mir ausserdem die Möglichkeiten des Mergens nicht ausreichen, da damit keine Versionen von Betriebssystemen abgefangen werden können.

Es gibt einen sehr einfachen Weg die Plattform als CSS-Selektor zur Verfügung zu stellen:

Einfach das Device–Plugin installieren und dann folgenden Code benutzen, um in den HTML–Body die Platform als CSS–Klasse hinzuzufügen:

Im CSS kann man dann bequem für die anzupassenden Selektoren den Plattform–Selektor voranstellen, z. B.:

Man kann es mit dieser Methode noch weiter treiben und gezielt für Plattformversionen Selektoren anlegen. Hier mal als Beispiel, um Android mit einer Versionen von 4.4 auszuwählen:

Im CSS benutzt man es dann so:

Eine Sache gibt es hier zu beachten: Selektoren dürfen nicht mit einer Zahl beginnen, deshalb wandle ich sie auch oben um.

Cordova, CSS, Javascript, jQuery, Phonegap