html meta tag viewport

Question

Je construis une page HTML de destination, vous pouvez le voir here j'ai utilisé la balise meta viewport de cette façon:

<meta name="viewport" content="width=device-width"> 

Quand je rentre sur cette page à partir du mobile, la largeur de la page cela ne correspond pas à l'écran, Exemple d'Iphone - http://mobiletest.me/iphone_5_emulator/#u=http://tzabar.exactive.co.il/ qu'est-ce que j'ai mal fait?

Answer 1

---

Selon la suggestion de War10ck Pensez à modifier balise meta viewport à quelque chose comme ce qui suit:

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

Vous pouvez également apporter des modifications dans votre CSS pour vous aider. Envisagez de changer la classe .content. Par exemple:

.content{ 
    width: 100%; 
    max-width: 930px; 
} 

Je ne suis pas sûr de ce que votre objectif de conception ultime est, mais cela devrait vous aider à aller dans la bonne direction. Vous pouvez également regarder quelque chose comme Bootstrap http://getbootstrap.com/ pour vous aider à rendre les sites sensibles.

Answer 2

Tout d'abord, suivre les bons conseils de jmadden et changer votre balise de fenêtre à quelque chose comme

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

Puis à la ligne 54 de style.css vous:

.content { 
    width: 930px; 
    margin: 35px auto; 
} 

Vous devez supprimer cette 930px de largeur ou remplacez-le par des requêtes de média car dans les fenêtres étroites, cela empêche la mise en page de se réduire.

Hope this helps