iOS est facile, car le rapport de pixel est toujours de 1 ou 2, et la résolution cible est toujours pixels/ratio. Android, cependant, utilise 1,3, 1,5, et dans certains cas 2,25 pour un ratio de pixel. Je ne connais aucun moyen de définir le dpi cible en pixels/ratio pour les appareils Android, ce qui serait une solution facile, mais j'imagine une solution pixel imparfaite pour tout affichage dont le nombre de pixels physiques est un multiple impair de ses creux compte (1.3, 1.5, etc.).Comment écrire CSS pour un site multiplateforme mobile
En ce moment j'écris essentiellement css pour chaque -webkit-min-device-pixel-ratio
, et en multipliant simplement mes valeurs px
par ce rapport manuellement (avec de légers ajustements pour arrondir). Utiliser em
s fonctionne très bien pour les polices et quelques autres choses, mais je dois utiliser px
pour le positionnement et le dimensionnement des éléments si je ne veux pas de pixels à moitié, vides ou superposés.
Y a-t-il une meilleure façon de procéder?
Sinon, quelle est la meilleure façon de traiter les images d'arrière-plan. Je ne veux vraiment pas avoir à réécrire chaque position d'arrière-plan pour chaque icône pour chaque ratio simplement parce que je change le background-size
pour chaque device-pixel-ratio
.
J'ai effectivement la fenêtre d'affichage tout mis en place, mais la largeur de périphérique pour les appareils Android semble être des pixels physiques, pas de trempettes. Savez-vous si c'est correct? Je suppose que mon problème, vraiment, est mon obsession de la perfection des pixels. Je ne supporte pas l'idée de faire évoluer les choses d'une façon ou d'une autre. – bearfriend
Désolé, je n'ai pas d'expérience directe avec ça. Je pense que la mise à l'échelle est juste une partie de la conception web moderne, cependant. La meilleure alternative à laquelle je peux penser est d'utiliser des requêtes média pour aligner le site Web sur des mises en page de tailles différentes en fonction de la fenêtre, plutôt que de le faire continuellement. – Cthulhufish