web-dev-qa-db-fra.com

Responsive design - Media Query ne fonctionne pas sur iPhone?

J'essaie de créer une version de mon site Web adaptée aux mobiles pour que mon site réagisse à une taille d'écran et une échelle plus petites en conséquence.

J'ai créé des requêtes multimédia, qui se comportent correctement dans un navigateur lors du redimensionnement sur un bureau.

Sur mon iPhone, Safari réduit tout le site Web mais conserve le rapport hauteur/largeur du site de taille normale. Comment faire pour que la requête média soit observée? ai-je raté quelque chose?

Voici un lien vers un bac à sable que j'essaie de faire fonctionner correctement - toute aide ou suggestion est appréciée:

http://www.preview.brencecoghill.com/

cssmobileresponsive-designmedia-queries
30
Gearu

Avez-vous la méta pour voir le port dans votre html?

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

Plus d'infos ici: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

74
coopersita

Je pense que vous trouverez un avertissement dans Chrome avec; au lieu de, .__, cela devrait marcher:

<meta name="viewport" content="width=device-width, initial-scale=1">
13
Must Impress

Je viens de vivre la chose la plus bizarre après avoir résolu ce même problème pendant une journée. Quelque chose à essayer si tout le reste échoue ...

Mes pages réagissaient parfaitement sur mon ordinateur portable pendant le développement, mais pas sur mon iPhone, iPad ou Samsung. J'ai finalement découvert que je devais mettre une ligne de commentaire après l'instruction DOCTYPE et avant l'instruction HTML, comme ceci:

<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">

Enfin, mes pages étaient réactives sur les appareils mobiles. Bizarre!

0
Filemangler