Affichage unique de ma page web

Bonjour,
Je sais pas la solution de ma question sera avec PHP, JavaScript ou html.
Ma question est :Quel code je dois ajouter pour que l'affichage de ma page web soit unique pour tous les navigateurs, en effet dans mon application j'ai des pages qui se n'affichent pas bien dans l'ordinateur d'un ami (bouton décalés) alors que sur mon ordinateur ils sont bien affichés.
Amicalement

Bonjour. Sans voir le code difficile de savoir ce qui cloche.

D'une manière générale, tout ce qui est positionné en absolu, ou/et avec des valeurs fixes (comme le pixel par exemple) pose problème. Mais il y a encore des dizaines (centaines) d'autres règles CSS pouvant poser problème si elles ont été mal définies, sans compter la structrure HTML de la page. Encore une fois, sans voir le code...

Bonjour Olivier C, merci pour ta réponse mais j'ai pas encore compris ta solution peux-tu m'expliquer

Salut,

Justement, il t'explique bien.

Il te dit que y'a pas de "ligne/code" miracle qui règle le design pour tous les navigateurs.
C'est du cas par cas, tu prends ton code, tu test sur les deux/trois/quatre navigateur et pour chaque éléments qui n'est pas comme tu veux, tu adaptes ton CSS.

Salut JENCAL,
j'ai te compris mais peux etre j'ai mal pausé ma question. Le problème est que mon ami utilise le même navigateur mais un système différent(ubuntu). est ce que c'est la même truc je dois changer le css qui doit être adapté au système ubuntu?

Le web c'est pour le web, rien à voir avec les systèmes d'exploitation. Tu n'es pas sur du client lourd.

Chaque navigateur a son propre moteur de rendu. à toi d'adapter. où de poser une question précise sur un navigateur précis

hmm J'ai compris mais selon toi quelle est la cause pour qu'une page web s'affiche différamment sur le même navigateur.
Modifié par developeurdusamedi (28 Jan 2019 - 11:41)

Une page, sur le "même" navigateur ne peux pas être différentes.

Sauf si les navigateurs sont de versions différentes
Ou
Si vous avez une taille d'écrans différentes (ce qui est applicable ici, c'est le responsive)

Bonjour,
@JENCAL
Il semble qu'il s'agisse du "même" navigateur" mais sur des OS différents.

Et évidemment, dans ce cas là, il peut y avoir des différences.

Même si dans le cas présent, je pense qu'il s'agit de différences dues à la taille de la fenêtre, ou de la police de caractère par défaut, ou des trucs de ce genre.

EDIT: on parle dans le vide, là. Il faudrait des images et du code pour qu'on puisse évaluer la situation.
EDIT2: la liste des raisons pour lesquelles un navigateur pourrait afficher une page de manière différente sur deux machines est à peu près aussi longue que la distance de la Terre à la Lune.

Amicalement,
Modifié par parsimonhi (28 Jan 2019 - 12:28)

Salut parsimonhi et JENCAL oui j'utilise le même navigateur sur deux os différents et la taille des écrans est différent aussi .

Je ne pensé pas que l'OS influencé le moteur de rendu du navigateur.... et je ne trouve aucune infos sur ce sujet... je suis preneur
Modifié par JENCAL (28 Jan 2019 - 14:04)

Bonjour,

Il y a évidemment des différences pour un même navigateur fonctionnant sur des OS différents, ne serait-ce que l'aspect par défaut des balises "input" qui est dépendant de l'OS.

Note : le nombre de ces différences a tendance à se réduire avec le temps pour les fonctionnalités anciennes.

Amicalement,

Alors je crois de dois réctifier la partie CSS dans l'autre ordinateur où les boutons sont décalés.

JENCAL a écrit :
Je ne pensé pas que l'OS influencé le moteur de rendu du navigateur.... et je ne trouve aucune infos sur ce sujet... je suis preneur

Et pourtant... le nombre de fois où ça m'est arrivé. Et maintenant que je suis sous Linux je m’aperçois à quel point ce système d'exploitation est délaissé. Ne serait-ce que pour les fonts communes entre Windows et Mac et dont certaines ne sont pas reconnues sous Linux (et en plus ça dépend de la distribution utilisée).
Modifié par Olivier C (28 Jan 2019 - 14:45)

Bonjour,

il faudrait connaître la résolution de cet autre OS. Ou mieux (plus général) tester sur un écran full HD (1920 de large) en mode responsive (Shift-Ctrl-M sur Firefox) dans toutes les résolutions de 320 à 1920 en passant par 360, 375, 768, 1024, …
Responsive Web Design

edit : à propos des fontes. Safari était connu pour avoir des polices plus grasses que les navigateurs sous Windows, je prévoyais systématiquement 2-3px de marge en intégrant sous Windows. C'était du temps de Verdana et autres fontes websafe. Maintenant on a @font-face partout (merci… IE ), des system font stacks (merci GitHub) qui passent partout et plus important plus de designs calés au pixel près (merci le mobile, tablette, 12000 tailles d'écran et de fenêtres possibles)
Modifié par Felipe (28 Jan 2019 - 14:54)

Bonjour,

Felipe a écrit :
il faudrait connaître la résolution de cet autre OS. Ou mieux (plus général) tester sur un écran full HD (1920 de large) en mode responsive (Shift-Ctrl-M sur Firefox) dans toutes les résolutions de 320 à 1920 en passant par 360, 375, 768, 1024, …

Rien que d'imaginer devoir faire tous ces tests, c'est un coup à faire un infarctus, ça !

Amicalement,

J'ai testé ma page avec (Shift-Ctrl-M ) et c vrai j'ai vu qu'une partie de ma page s'est caché. Comment je peux corriger ça ?

Là il faut regarder les médias quéries
https://www.alsacreations.com/article/lire/930-css3-media-queries.html

Bonjour,

Felipe a écrit :
edit : à propos des fontes. Safari était connu pour avoir des polices plus grasses que les navigateurs sous Windows, je prévoyais systématiquement 2-3px de marge en intégrant sous Windows. C'était du temps de Verdana et autres fontes websafe. Maintenant on a @font-face partout (merci… IE ), des system font stacks (merci GitHub) qui passent partout et plus important plus de designs calés au pixel près (merci le mobile, tablette, 12000 tailles d'écran et de fenêtres possibles)

Il faut quand même se méfier quand on met des textes de couleur claire sur des fonds sombres : Mac OS et Windows ne font pas pareil (Mac OS affiche les textes avec une police plus grasse dans pas mal de cas (mais pas dans tous les cas, sinon, ce serait trop simple)).

Amicalement,

parsimonhi a écrit :
Rien que d'imaginer devoir faire tous ces tests, c'est un coup à faire un infarctus, ça !

Si c'était avec les PSD de 2011-2013 encore pensés en ayant le desktop en tête (BIEN chargé) oui mais la contrainte n'existe plus. J'intègre à partir de 3 designs 320-tablette-desktop pensés pour le mobile et toutes les résolutions intermédiaires c'est en redimensionnant à la volée pour constater et résoudre les 2-3 petits bugs et retours à la ligne intempestifs.
Et CSS fournit à présent tous les outils pour rester fluiiiide (la magie de flexbox, grid layout et de pas avoir à utiliser - pour la mise en page - les flottants et bien entendu le positionnement absolu)