28172 sujets

CSS et mise en forme, CSS3

Rem - différences selon navigateur

Bonjour/bonsoir

Un client m'a demandé de passer un vieux site (2003) en responsive, pour ne pas faire le boulot à moitié je suis partie sur des rems.
Cependant, j'ai un petit soucis avec.

Un block à 32rem, sur chrome fait 320px (ce que je souhaite), mais sur Mozilla il fait 240px.
Une font à 1.4rem sur chrome fait 14px (toujours ce que je souhaite) mais sur Mozilla fait 11.25px.

Il semblerait que toutes mes mesures rem, soient rapetissées sur Mozilla..

J'ai défini le font-size de <html> à 62.5% (pour que le rapport px/rem soit plus facile) et fait un reset classique (Meyer) pour ne pas avoir d'interférences avec les css de base, j'ai épluché chacune de mes lignes dans la console Mozilla pour voir si malgré le reset il restait quelque chose qui court-circuiterait, mais rien.

Sauriez vous par hasard à quoi cela est dû ?
J'ai cherché sur google, mais je n'obtiens aucune réponse.

Merci pour vos lumières et bonne journée/soirée/nuit à vous.

EDIT : J'ai testé rapidement de modifier le "font-size:62,5%" défini pour mon <html> et en le passant à 78% j'ai le bon affichage sur Mozilla, mais plus sur Chrome du coup.. Une idée de comment remédier à ça ?
Modifié par Chouchine (12 Nov 2016 - 02:35)
Administrateur
Bonjour et bienvenue, Smiley smile

quelle est la taille par défaut dans Firefox ? Si ce n'est pas 16px, forcément 100% ou 1rem ne fera pas 16px. C'est dans (touche Alt) Outils / Options / Contenu / Police et couleurs. Par défaut Times New Roman 16px mais ça peut être modifié.

Pas de zoom sur cette page ? Ctrl-0 pour un reset.

Est-ce que Chrome et Fx sont sur la même machine ? Est-ce que la différence disparaît en fixant à 100% le zoom système de ton Win 10 ? Paramètres / Système / Affichage. J'ai 150% de zoom sur mon portable et Edge considère que la largeur de la fenêtre est de 1280px alors que l'écran fait bien 1920px de large (je n'ai pas Chrome ni Chromium par contre, je n'ai jamais comparé).

En indiquant une taille en px; est-ce que le résultat est identique au moins ?
Modifié par Felipe (12 Nov 2016 - 03:13)
Merci pour ta réponse Felipe.

En indiquant la taille en pixels les fonts et height sont bien identiques (ou presque), seul la largeur varie de mémoire. (je suis sur mon mobile, je vérifierai demain. ^^)

Les tests ont été fait sur le même ordi oui.
Et le zoom est bien à 100% sur les 2 navigateurs.
Je n'ai pas touché aux paramètres de mozilla, donc en toute logique, ce sont les paramètres par défaut, je vérifierai demain.

Dans le CSS, il y'a dans le reset font-size mises à 100% inherit sur tous les éléments, puis sur html je l'ai mis à 62,5% pour la facilité de conversion et enfin, dans body j'ai mis comme font-size 1,4rem (ce qui fait/devrait faire 14px).

Je pensais avec tout ce cheminement que j'annulais totalement le CSS par défaut des navigateurs.. Ça ne serait pas le cas alors ?
Désolée pour le double post, je ne vois pas de bouton édité via le mobile. Smiley ohwell

Est-ce qu'en utilisant le viewport scale:0, je pourrais unifier ça ? Ou l'utilisation n'est réservé que pour les mobiles ?

J'aimerais vraiment essayé de faire en sorte que le site soit le plus identique possible sur tous les navigateurs. Avec les polices en px, dès que l'on zoom/dezoome la maquette change pas mal, et ce n'est plus harmonieux.
(hors mon client, est en résolution minimum sur son pc, 800px de large ce qui foire tout avec les fonts en pixels)
Chouchine a écrit :
Désolée pour le double post, je ne vois pas de bouton édité via le mobile. Smiley ohwell

Est-ce qu'en utilisant le viewport scale:0, je pourrais unifier ça ? Ou l'utilisation n'est réservé que pour les mobiles ?

J'aimerais vraiment essayé de faire en sorte que le site soit le plus identique possible sur tous les navigateurs. Avec les polices en px, dès que l'on zoom/dezoome la maquette change pas mal, et ce n'est plus harmonieux.
(hors mon client, est en résolution minimum sur son pc, 800px de large ce qui foire tout avec les fonts en pixels)

Perso, je définis la taille de police à 1 EM sur la balise BODY, à "inherit" sur le sélecteur CSS * (reset) et enfin en REM dur tout élément dont la taille de fonte est différente.
Pas de calcul à effectuer et, jusqu'à présent, l'affichage semble correct en responsive (à voir pour Chrome, non testé car non installé sur mon poste de travail et mes périphériques).
Les tests en augmentant le facteur de zoom et le diminuant sur les navigateurs ont également été concluants (merci les REM, bien plus faciles à manier que les EM).
Bonjour.

Sur mon système, Internet Explorer 11 a pour taille par défaut 18,66px et Mozilla Firefox 48, 16px.

L'unité rem faisant référence à la taille à la racine, il suffit de donner la même en ciblant :root ou html

Smiley smile
Administrateur
Bonjour,

S'il y a une différence de "rem", c'est forcément que la taille de police par défaut de l'un ou l'autre navigateur a été modifiée.

Peux-tu tester le site www.mydevice.io sur tes deux navigateurs et confirmer que la valeur de "Root font size" est différente ?

Si oui, alors il faut aller du côté des préférences du navigateur (sur Firefox : préférences > contenu > police par défaut).

Mais sinon, ce n'est pas très grave que les tailles soient différentes, c'est presque un peu le but des unités fluides : s'adapter aux préférences utilisateur tout en demeurant homogènes.

@zelena : même en ciblant :root ou html, tu ne peux pas obtenir la même valeur par défaut, sauf si tu imposes une unité fixe comme le pixel Smiley ohwell
Merci pour vos réponses.

La police par défaut de Mozilla est de 12px effectivement. ><
Résultat de mydevice.io ici.

Et si je le passe à 16px, tout est bien normal.
Pour chez moi le problème est réglé.

Pour le site, j'ai réussi à contourner la taille de police des navigateurs grâce à vos pistes.
/*RESET*/
*{
font-size:100% inherit;
}
html{
    font-size:10px;
}
body{
    font-size: 1.4rem;
}


Il n'y'a que l'affichage par défaut du système d’exploitation qui change l'affichage, mais ça je ne pense pas qu'on puisse y faire grand chose.
Si pas de réponse dans ce sens là je passerais mon sujet en résolu.

Merci !
Raphael a écrit :

@zelena : même en ciblant :root ou html, tu ne peux pas obtenir la même valeur par défaut, sauf si tu imposes une unité fixe comme le pixel Smiley ohwell


Dans l'inspecteur des navigateurs, la valeur par défaut est exprimée en pixel...
Mais peut-être change-t-elle suivant les configurations, les appareils... (Edit : C'est en tout cas ce que je déduis de votre remarque...)
Smiley sweatdrop
Modifié par Zelena (12 Nov 2016 - 14:56)
Administrateur
Chouchine a écrit :
Pour le site, j'ai réussi à contourner la taille de police des navigateurs grâce à vos pistes.

html{
    font-size:10px;
}

Si tu choisis une unité pixel en tant que référent sur HTML, tu empêches les préférences utilisateur : https://github.com/twbs/bootstrap/issues/19460 Smiley decu

Zelena a écrit :
Dans l'inspecteur des navigateurs, la valeur par défaut est exprimée en pixel...
En effet, mais il s'agit d'une valeur "calculée". La vraie valeur est, par défaut, "1em".

Zelena a écrit :
Mais peut-être change-t-elle suivant les configurations, les appareils...
Oui en effet. Ce "1em" aura une valeur différente selon la configuration de l'utilisateur, ou des navigateurs : https://nicolas-hoizey.com/2016/03/people-don-t-change-the-default-16px-font-size-in-their-browser.html
Arf, je n'avais pas pensé à ça.

Zut.

Il n'y a pas de moyen d'avoir une taille minimum ? (peut-être en Javascript)

Que le site soit zoomé ne me dérange pas, c'est à l'inverse quand la police par défaut est trop petite que tout est décalé et ne ressemble plus à rien. Smiley ohwell
connecté
Chouchine a écrit :
Il n'y a pas de moyen d'avoir une taille minimum ? (peut-être en Javascript)

En css avec des media queries et une déclaration en pixel pour les petites résolutions c'est possible, mais aucun intérêt : si le site ne ressemble plus à rien quand il est zomé c'est que le layout dans son ensemble n'a pas été pensé pour cela.

Quand on commence en unités relatives il faut TOUT coder en unités relatives, les polices... et le reste. Essayez par exemple d'agrandir ou de réduire cette page de 25% à 500% si cela vous chante, vous verrez que le layout de la page n'explose pas (à 500% vous aurez néanmoins des débordements de mots et de certains éléments, c'est inéluctable) : Layout test with Scriptura.
Modifié par Olivier C (13 Nov 2016 - 09:40)
Olivier C a écrit :

En css avec des media queries et une déclaration en pixel pour les petites résolutions c'est possible, mais aucun intérêt : si le site ne ressemble plus à rien quand il est zomé c'est que le layout dans son ensemble n'a pas été pensé pour cela.

Quand on commence en unités relatives il faut TOUT coder en unités relatives, les polices... et le reste. Essayez par exemple d'agrandir ou de réduire cette page de 25% à 500% si cela vous chante, vous verrez que le layout de la page n'explose pas (à 500% vous aurez néanmoins des débordements de mots et de certains éléments, c'est inéluctable) : Layout test with Scriptura.


Tous est pensé en responsive, c'est ma commande.
Les médias queries sont utilisés, les largeurs sont en %, les hauteurs, margin, padding et fonts en rem. Et tout roule nickel sur tous les supports et également quand on zoome sur une page.

Le problème est sur le dézoome ou quand la police du navigateur est petite car sur l'accueil, et presque sur toute les autres pages, il y'a peu de contenu, si la police sélectionné est petite sur Chrome ou 12px sur Mozilla y'a même pas la moitié de l'écran de couvert.
D'où ma question, peut-on fixer une taille minimum de police ? (indépendamment de la largeur du support donc).
Juste en css c'est impossible je pense, mais en javascript ça doit l'être. '-'
connecté
Et bien alors vous pourriez faire une définition html comme ceci :
<meta name="viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0">

Ou en CSS (voir la spec' ici : @viewport - MDN) :
@viewport {
    width: device-width;
    zoom: 1;
    min-zoom: 1;
}

Mais attention cette dernière solution, issue de CSS3, n'est que très peu supportée (et je ne l'ai jamais testé).
Sujet clos
Aller à