Bonjour,

Voila un moment que je galère sur mon site avec les media queries et les différents format de tablettes et smatphone.

J' ai configuré mon site avec l'inspecteur de Google Chrome pour les quelques tailles différentes qu'il propose en portrait comme en paysage comme ci dessous par exemple avec le format iphone 6,7,8

http://alexandre-viallet.ovh/Alex-multi-services

A ma grande surprise il s'affiche différemment sur les sites comme Responsinator ou l on peu visionner son site web sur différents supports:

 http://www.responsinator.com/?url=http%3A%2F%2Falexandre-viallet.ovh%2FAlex-multi-services

Je voudrais bien savoir pourquoi et qui dois je croire du-coup? L'inspecteur gadget ou Responsinator? 

Ca rend vraiment foufou se genre de problème.

Merci à vous

-
Edité par Alexandre42 19 juin 2018 à 14:43:43

Bonjour,

ce que tu dois croire, c'est un vrai iPhone 6. Le reste n'est qu'émulation.

Oui c'est sur pour mon tel je passe en mode développer en le reliant au cable usb et je peu l'inspecter directement mais il y a forcement un moyen sans devoir acheter tout les tel et tablettes du marché lol.

Je pense qu'il y a une méthode que j'ignore pour ne pas se trouver face a ce genre de problèmes!

Bonjour, Il faut bien comprendre comment l'interprétation du code fonctionne, chaque navigateurs a sa façon d'afficher les éléments. En général si tu te débrouille bien, ton affichage sera à peu près équivalent sur tous les navigateurs en faisant quelques concession (hors exception IE et vieux navigateurs). Si tu tien vraiment à utiliser certaines fonctions css qui ne fonctionne pas sur certains navigateurs, il faut que tu précise un équivalent par navigateur concerné sans quoi ta fonctionnalité de sera pas activé avec équité pour tout le monde. De plus les sites comme responsinator on eux aussi leurs manières d'interpréter le code (donc a utiliser avec méfiance).

Pour que ton code sois le plus juste possible, il faut qu'il passe le test du w3c et qu'il fonctionne de façon équitable sur tous les navigateurs (en évitant de mettre tout en absolue ;p ) et ensuite ça devrait être plus facile de faire la responsivité mobile. De plus, pas besoin d'une feuille de style par appareil, si tes éléments sont relatifs, 2 ou 3 feuilles au max suffisent. J'espère que ça répond a ta question.

-
Edité par cyp86 19 juin 2018 à 15:01:53

Merci pour tout ces conseils.

W3C ne m'indique pas d'erreurs ce qui est déjà un bon point.

Je ne pense pas avoir avoir mis en absolute des élements à par ceux que j ai voulus centrés dans leurs containers parents

Pour les que marges et padding differents des navigateur soit initialisé a 0 j'utilise *

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0; 

}

-
Edité par Alexandre42 19 juin 2018 à 16:18:54