Bonjour à tous,

j'ai une question concernant les media queries. Je cherche à rendre un site responsive sur Iphone 14 pro max.

Lorsque je vais dans le developer tool, je vois que l'écran mesure 430*932 px. Je créé donc une règle en ce sens dans mon css :

@media screen and (max-width:431px){

}

Le soucis c'est que lorsque je selectionne le téléphone dans le developer tool les règles ne s'appliquent pas :

Pourtant, quand je réduis la fenetre manuellement jusqu'à 430px alors là les règles s'appliquent.

Comment cela se fait-il ?

-
Edité par Fuunji 9 avril 2024 à 22:24:42

Bonsoir, pour le site https://www.leslarmesdejundur.com/ ?

Modifie la meta viewport de :

<meta name="viewport" content="initial-scale=1">

en

<meta name="viewport" content="width=device-width, initial-scale=1" />

Lire :

• https://developer.mozilla.org/fr/docs/Web/HTML/Viewport_meta_tag
• https://www.alsacreations.com/article/lire/1490-Comprendre-le-Viewport-dans-le-Web-mobile.html

Bonjour,

en plus du message de AbcAbc6, je voudrais ajouter : ne fais pas de règles suivant un appareil particulier, mais plutôt lorsque ton design casse. Ça peut être 431, comme 500, ou 600px. L'idée c'est que ça soit utilisable quelle que soit la largeur de la fenêtre.

Oui effectivement ça partait plus logique de faire ça quand le design casse en fonction de la taille de la fenêtre. 

En realité je ne le fais pas par rapport à un appareil particulier mais j'ai utilisé cet exemple car je trouvais ça plus simple de poser ma question en m'appuyant dessus. 

Mais du coup j'aimerais comprendre pourquoi est ce que cela ne fonctionne pas dans le developer tool quand je sélectionne un telephone ? 

-
Edité par Fuunji 10 avril 2024 à 17:58:00