★meta要素でビューポートを指定するパソコン向けサイトをスマートフォンで表示すると、文字などが小さすぎて閲覧しづらくなります。この問題は、ビューポートを指定することで回避できます。ビューポート(viewport)とは、表示サイズのことです。ビューポートは、meta要素で値を指定することで変更できます。index.htmlに以下の記述を追加してください。上記HTMLソースでは、meta要素のnameの属性の値にviewportを指定して、content属性の値に横幅や倍率を指定しています。この変更を保存したファイルをウェブサーバーにアップロードして、それをスマートフォンで表示させると、以下のような画面となります。maximum-scale=1とカンマ区切りで3つの値を指定しています。以下にそれぞれの値を詳しく見ていきましょう。ビューポートの横幅width=device-widthは、横幅がデバイスの横幅となるように指定しています。そのデバイスの横幅になるように指定しておけば、おおむねすべてのデバイスで原寸大でウェブページが表示されるようになります。ビューポートの初期の表示倍率initial-scale=1は、初期の表示倍率を指定しています。値に1を指定したので1倍、つまり、そのままの倍率で表示されることになります。ビューポートの最大の表示倍率maximum-scale=1は、最大の表示倍率を指定しています。これは、ユーザーの操作でどこまで拡大表示を可能にさせるかということです。値に1を指定したということは1倍を最大倍率にする、つまり、ユーザーに拡大表示操作をさせないように指定しています。この際、maximum-scale=1にしておけば、文字のサイズはそのままに一行当たりの文字数が増える表示になります。meta要素でビューポートの指定をしたことで、ひとまず等倍で表示させられるようになりました。このままの状態ではウェブページがやたらと大きく表示されてしまうので、以前の画面とどちらが見やすいか現時点では何とも言えません。次回は、様々なビューポート指定を試して、もう少しだけビューポートについての理解を深めます。