Cette petite balise peut faire toute la différence ! Confortée par un article de Ian Yates paru hier sur Tuts+, voici un petit résumé des impacts de cette balise méta.

Tout d’abord, cette balise a été introduite par Apple, puis implémenté par les navigateurs de tout bord. De façon générale, on utilisera le code suivant pour que le contenu soit affiché lisiblement sur tous les périphériques et que le niveau de zoom par défaut soit bien égal 1 :

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

 

Cela dit, il faut savoir que cette balise n’est pas un standard et n’a jamais été reprise dans les spécifications du W3C. C’est Microsoft qui a pointé ce fait du doigt lors que la société a choisi d’ignorer ce metatag dans IE10 dans certains cas. A la place, ils ont opté pour l’utilisation de CSS Device Adaptation, solution préconisée par le W3C.
Cela consiste à utiliser la règle CSS @viewport :

@viewport {
    width: device-width;
}

 



Étant donné que ce travail est en développement, il faut utiliser la version préfixée pour qu’elle soit reconnue par IE10 :

@-ms-viewport {
    width: device-width;
}

 

L’utilisation de la balise méta viewport n’est donc pas pérenne et vous pouvez devriez déjà inclure la règle CSS @viewport dans vos feuilles de style en attendant qu’elle soit implémentée partout.

Source : http://hub.tutsplus.com/tutorials/quick-tip-dont-forget-the-viewport-meta-tag–webdesign-5972 (en anglais)