[Résolu] Responsive sans effet avec Apple

Bonjour,

Je n'arrive pas à faire fonctionner le responsive sur les terminaux iPhone et iPad alors que cela fonctionne sur smartphones et tablettes Android.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

@media all and (pointer:coarse) and (max-device-width: 640px) { blabla }

Sur les terminaux Apple, l'affichage se comporte comme un affichage ordinateur mais dont on aurait réduit la fenêtre du navigateur.

Merci pour votre aide.
Modifié par wazer51 (08 Mar 2015 - 16:22)

Parce que la largeur d'un écran d'iMachin est plus grande
Voir http://www.mydevice.io/devices
Modifié par PapyJP (06 Mar 2015 - 20:01)

Bonjour,

Merci pour votre réponse. Pourtant je fonctionne avec les largeurs physiques device-width des écrans. Et le plus grand "CSS width" est de 375 px pour l'iPhone 6. Et le @media est réglé jusqu'à 640 px.

Donc ça devrait fonctionner ?
Modifié par wazer51 (06 Mar 2015 - 20:05)

wazer51 a écrit :
Bonjour,

Merci pour votre réponse. Pourtant je fonctionne avec les largeurs physiques device-width des écrans. Et le plus grand "CSS width" est de 375 px pour l'iPhone 6. Et le @media est réglé jusqu'à 640 px.

Donc ça devrait fonctionner ?

Oui, vous avez raison, ça devrait, mais je vous recommande tout de même de faire des tests avec des valeurs intermédiaires pour voir ce qui se passe. Je ne suis pas sûr qu'on puisse se fier 100% à ce que rapporte le @media
Tenez nous au courant des résultats de vos tests, ça pourra être utile à tout le monde.

Voir aussi http://stephen.io/mediaqueries/

En effet, les @media ne sont peut-être pas très précis.
Il semblerait que j'ai trouvé la solution en rajoutant également des "width" en plus des "device-width".
Mon code devient donc :

@media all and (pointer:coarse) and (max-device-width: 640px), all and (max-width: 640px) { blablabla }

Peut-être que les terminaux Apple ne prennent pas en compte les largeurs d'écran physiques du CSS avec "device-width". Je n'ai pas de terminal Apple iPad ou iPhone sous la main pour tester immédiatement mais j'ai essayé avec l'extension User-Agent Selector de Chrome qui simule le support et dans lequel ça ne fonctionnait pas avant. Maintenant oui. En espérant qu'il n'ait pas pris uniquement la taille de ma fenêtre de navigateur. Affaire à suivre...

Salut,

Tu utilises la media query pointer: coarse, ce qui explique sans doute pourquoi Safari pour iOS zappe les règles CSS contenues dans le bloc @media correspondant. Soit dit en passant, pointer est une media query CSS 4 ; or, il me semble prématuré d'utiliser des CSS 4 dans un contexte de production.

Par ailleurs, ta méta viewport, telle quelle, empêchera l'utilisateur de zoomer : vire les paramètres minimum-scale, maximum-scale et user-scalable.
Modifié par Victor BRITO (08 Mar 2015 - 14:14)

Ok merci des infos !
Je ne savais pas que pointer faisait partie du CSS 4. C'est viré.
A+