Le HTML moderne bénéficie des styles "display:table" ou encore "display:table-cell" afin de simuler le comportement de tableaux ou de cellules de tableaux sans avoir besoin de recourir aux tableaux (qui sont eux destinés à afficher des données tabulaires).

Néanmoins, le style "display:table-cell" a un inconvénient majeur quand on l'utilise sur un navigateur mobile : la taille de la police peut devenir très réduite en fonction du viewport du téléphone et du reste du contenu de la page. À noter que ce problème est spécifique sur navigateur mobile (exemple : Chome ou Firefox sur Android).

Prenons en exemple le code suivant :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Viewport test</title>
<!--<meta
name="viewport" content="initial-scale=1, maximum-scale=1">-->
<link
href='http://fonts.googleapis.com/css?family=Open+Sans&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style
type="text/css">
html{font-size:100%;}
body {margin:0;background:#ddd;min-width:300px;font-family:'Open Sans',sans-serif;font-size:13px;color:black; text-size-adjust:none;}
div {margin:0;padding:0;border:0;vertical-align:top;}
#content {background-color:white;padding:2px 5px;text-size-adjust:none;}
</style>
</head>

<body>
    <div
id="content">
        <h1>Simple titre</h1>
       
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
        <div
style="display:table;">Cas de display:table</div>
        <div
style="display:table-cell;">Cas de display:table-cell</div>
        <div
style="display:block;"><p>Cas de &lt;p&gt; dans display:block</p></div>
    </div>
 </body>

Cas concret en images. Prenons Firefox 36 sur Windows 8.1 :

Display:table-cell affiché correctement avec Firefox sous Windows, sans viewport

La même page sur Firefox mobile pour Android 5 :

Display:table-cell affiché incorrectement avec Firefox sous Android, sans viewport

On remarque que la police utilisée dans le cas du display:table-cell est très petite. À noter que le résultat est similaire avec Chrome pour Android. Et la présentation du display:table occasionne des retours à la ligne.

Maintenant, décommentons du code HTML précédent la ligne "<meta name="viewport" content="initial-scale=1, maximum-scale=1">".

On obtient toujours la même chose avec Firefox 36 sur Windows 8.1 :

Display:table-cell affiché correctement avec Firefox sous Windows, avec viewport

Et cette  même page sur Firefox mobile pour Android 5 :

Display:table-cell affiché correctement avec Firefox sous Android, avec viewport

On voit que le résultat est maintenant parfait.

Plus généralement, un site Internet doit prendre en compte les navigateurs des mobiles. Cette balise meta pour le viewport n'est qu'une première étape pour traiter correctement les mobiles et tendre vers le Responsive design.