noahnoah研究所

GoogleはWEBページがスマホ対応しているか判定するモバイル フレンドリー テストのツールを公開しています。
noahnoah研究所をチェックすると、スマホ対応していないと判定されました。



ダメな理由は、次の通りでした。

×　テキストが小さすぎて読めません
×　リンク同士が近すぎます
×　モバイル用 viewport が設定されていません

面倒そうなので、放置していましたが、スマホで訪問してくれる人が困るかもしれないので、修正することにしました。

ひとまず、モバイル用 viewportを設定します。
これを設定しておかないと、スマホはページ全体が表示されるよう自動的に縮小してしまうからです。

<META NAME="viewport" content="width=device-width , initial-scale=1.0">

とりあえず、上記の通り、一般的なviewportを設定しておきました。
ちなみに、device-widthはデバイスのサイズに合わせて表示するという意味だそうです。
device-widthの代わりに横幅のピクセル数を指定できますが、いろいろと面倒なだけなので、やめました。
また、initial-scaleは表示倍率で、1.0なら指定しなくてもいいかもしれません。

ついでに文字を小さく表示する<SMALL>タグなども削除しました。

リンク同士を離すのにしたことは、2つあります。

1つ目はリンク先を改行するとき、<BR>の代わりに</P>を使い、空白行を加えることです。
リンクのタップサイズを考慮して7mm以上離す必要があるらしいのですが、空白行だけでも十分みたいです。

2つ目はメニューをテーブルではなく、リスト<UL><LI>〜</LI>で組み、リキッドにしました。
LIをCSSで「float: left;」指定するだけですが、ブラウザの横幅に合わせてメニューの改行位置が変わるようになります。

とりあえず、これだけでトップページはモバイルフレンドリーと判定されるようになりました。
トップページ以外も少しずつ修正していきます。



ただ、合格しても、PageSpeed Insightsを見ると「修正が必要」なところは残っています。



横幅が320ピクセル以上の画像を使うと、どうしても引っかかります。
しかし、スマホを横にしたら表示できるサイズであれば問題ないはずです（600ピクセル以下）。



→ このnoahnoah研究所のブログ内をGoogleで検索する
→ noahnoah研究所に戻る
→ noahnoah研究所掲示板(^o^)に行く
→ 伊藤＠横浜へメールを送る

※このnoahnoah研究所のブログ(http://plaza.rakuten.co.jp/noahnoah/)の画像および文章は、出典元を示していただければ、私に事前許可を得ることなく、引用していただいても構いません（出典元を示さず盗用しないようにお願いします）。

noahnoah研究所のブログ（カテゴリー一覧） ├カテゴリー[ 車 ] ├カテゴリー[ 家作り ] ├カテゴリー[ 太陽光発電 ] ├カテゴリー[ 家電 ] ├カテゴリー[ ネコ ] ├カテゴリー[ セキュリティ ] ├カテゴリー[ 熱帯魚 ] ├カテゴリー[ 健康 ] ├カテゴリー[ 食べ物・飲み物 ] ├カテゴリー[ 旅行・観光 ] ├カテゴリー[ 庭いじり ] ├カテゴリー[ ゲーム ] ├カテゴリー[ 楽天ブログ ] └カテゴリー[ その他 ]