昔のページをモバイルフレンドリーなページに修正する : インターネット１２０％活用

はるか昔に作ったページはGoogle先生に、「そのページモバイルフレンドリーではないやろ！」と叱られます。ま、半分自分の覚書用だったりするのでそのまま放置でもいいのだが、ＩＴ系で働く人としてはとりあえず少しづつ最低限の修正を施すか、ということで、最低限どうすりゃいいのかテストを開始した。

モバイルフレンドリーでないページのサンプル
レスポンシブWebデザインでないSample

このページの<HEAD>...</HEAD>の部分の記述はこれだけ

body{font-size:15px; color:#FF0000;}

</STYLE>

このページをGoogleのモバイルフレンドリーテストにかけてみる。
すると、字が小さすぎてよめねーよ
ビューポートが設定されてませんねー
とか問題点の指摘がされて、
そのページはモバイルフレンドリーじゃねーよ（今時、化石かあんた？）みたいなことをGoogle先生に言われるわけです。

test_sample1

それでGoogleはこのページが画面の小さいスマホではどのように表示されると考えているかというとこんな感じ
sc_sample1

確かに字が小さすぎて見えないかもね。
だけど、どう表示されるかは、そのデバイスとそこに搭載されているブラウザのレンダリングエンジンの仕様・動作によるから、こんな小さな表示になるとは限らない。（最悪の場合ってことかと理解しておく）
※コンテンツの横幅のデフォルト値は960pxとなっているようで、それをそのまま縮小してスマホ画面にもってくるとこんな感じになるのかもね。

ちなみにiPhoneとかiPadminiとかだとどう見えるかー、というのをシミュレーションしてくれる
Responsive Checkerというページがあるので、そこでシミュレーションしてみる。

iPhoneの場合
こんなにシンプルなページなのに画像が画面はみだしちゃって横スクロールせなあかん
checker_sample1

iPad miniの場合
まあ、iPadminiくらいの画面だとＯＫ
checker_iphonmini

そんでもって、じゃあ、モバイルフレンドリーにすっか、ということですが、
①Viewportの設定
②メディアクエリでスマホ用のCSSを記載する
は最低限やらねばならないようなので、
<HEAD>...</HEAD>間に
①viewportの設定
②CSSで画像ファイルの表示は、小さい画面用に相対サイズの表示にする
img{max-width: 90%; height: auto;}
③メディアクエリーで幅480px未満の画面の場合のフォントサイズを少し小さい12pxにした。
12pxて結構小さいよ。小さい画面に表示するぎりぎりのフォントサイズかな。５０代には既につらい大きさ（いや小ささか）。
あとは、お遊びで文字の色を青に変更している。

<HEAD>

body{font-size:15px; color:#FF0000;}

img{max-width: 90%; height: auto;}

@media screen and (max-width:480px){

body{font-size:12px; color:#0000FF;}}

</STYLE>

</HEAD>

このレスポンシブWebデザインになったsample

これをモバイルフレンドリーテストにかけてみると、Google先生はモバイルフレンドリーです、と認めて下さった。

test_sample2