モバイル フレンドリーテストの変更点

  • 追加された行はこのように表示されます。
  • 削除された行はこのように表示されます。
https://www.google.com/webmasters/tools/mobile-friendly/

趣味なサイトにはあまり関係ないですが、テストと言われると気になりますね。体裁は別にして手っ取り早くテストにパスするには、ビューポートを設定して全ての表示オブジェクトの幅を可変にしてしまえばよいようです。サイトの設定各所に以下を追加します。

!テンプレートに追加する
ビューポートを設定する
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
コメント欄などテキストボックスの幅を可変にする
 <input type="text" name="message" style="width:50%; box-sizing:border-box">
!cssに追加する
画像を伸縮させる
 @media screen and (max-width: 640px){
 	img {
 		max-width: 100%;
 		height: auto;
 		width /***/:auto;
 	}
 }

preの折り返し
 pre {
 	white-space: pre-wrap;
 	word-wrap: break-word;
 	overflow: auto;
 }

長いURLを折り返す
 body {
 	word-wrap  :break-word;
 }

テーブル内の折り返し
 table {
 	word-break:break-all;
 }

!サイドバーの非表示
下記を参考にさせていただきました。

[これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方(OXY NOTES)|http://oxynotes.com/?p=7219]
!さらに
こんなテストも。[PageSpeed Insights|https://developers.google.com/speed/pagespeed/insights/?hl=ja]

きりがないですね。

----
{{comment}}