Discussion :

[lokomass]

Bonjour à tous,

Je veux créer une div, avec une bordure en dessous. J'aimerai qu'elle fasse 1px de hauteur (je pense que c'est le minimum visible).
Pourtant je trouve que le trait d'1px est plus épais que 1px sur un mobile...
Et sur Safari, si je met une hauteur de 0.04em, le trait est plus fin est beaucoup plus "beau", amis plus visible du tout sur un mobile Android...

Du coup, comment faire pour que mes traits fassent 0.04em partout (soient le plus fin possible).
Comparé à un :after (ou je met height à 1px, le trait est du coup plus fin aussi)...

https://jsfiddle.net/7yo87hqb/2/

[Invité]

Bonjour,

un article sympa à lire : Le Web c’est pas en 72 dpi, coco!

[lokomass]

En gros la seule "solution" est d'adapter un css pour android et un css pour iphone ?

[Invité]

... ou de s'intéresser à des questions plus importantes qu'une simple épaisseur de trait...

Passe ton trait en gris, il paraitra plus léger (en tous cas moins "présent").

[NoSmoking]

Bonjour,
je suis un peu de l'avis de Jerôme dans le sens où un utilisateur d'Aie-Phone à l'habitude du rendu sur son Aie-Phone, qu'un utilisateur Android à l'habitude du ...etc et qu'il y a peu de chance qu'ils cherchent à faire la comparaison, le contenu restant le plus important.

Ceci étant mettre une épaisseur de trait en em va la faire dépendre également de la font par défaut de l'utilisateur mais également du zoom utilisé, ..., cela commence à faire pas mal de paramètres que tu ne maitrise pas.

Un solution qui me paraît pérenne et de mettre simplement l’épaisseur de ta bordure à thin, il semblerait qu'il y est à peu près consensus de la part des navigateurs, pas testé néanmoins.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.trait-bas-fin {
    border-width:thin solid black;
}