name="viewport"のmeta要素を追加することで、スマートフォン向けに画面の表示サイズを設定することができます。
<meta name="viewport" initial-scale=1.5, minimum-scale=0.5, maximum-scale=2, user-scalable=yes">
iOSのSafari（Mobile Safari）は、画面の幅の初期値が980pxになっているため、viewportが設定されていない場合、ページ全体が980pxの中に表示されるので、ページ内容が小さくなり、とても見辛いものになります。
特に小さなフォントサイズを指定したページでは、さらに小さく表示されてしまうので、判別もできない程になります。 そこで、viewportを使い、initial-scaleを設定して、スマートフォン向けに予め画面の表示サイズを大きくしておけば、ユーザーがわざわざピンチアウトで拡大する手間を省いてくれます。これはスマートフォンサイトにおけるユーザービリティの基本「文字サイズを大きく」に合致し、好ましいことだと思います。
問題は、「user-scalable=no」の設定です。user-scalableは、ユーザーがピンチイン、ピンチアウトで拡大縮小（ズーム）機能を許可するか、しないかの設定です。許可する場合は「yes、もしくは1」、許可しない場合は「no、もしくは0」と値を入れます。
<meta name="viewport" content="width=device-width, user-scalable=no">
この拡大縮小（ズーム）機能は、W3Cでも重要なアクセシビリティ機能であると勧告しています。それを無効にする「user-scalable=no」は、推奨されることではありません。
しかし、スマートフォンは縦で見るだけとは限らず、横にする場合もあります。横にする前に、ページをズームしていた場合、設定通りの横サイズにはなりません。また、端末の画面解像度は一定ではありません。などの理由から、「user-scalable=no」を指定するケースが多いのが現状です。