モバイル フレンドリーテスト

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)

さらに

こんなテストも。PageSpeed Insights

きりがないですね。


お名前: コメント:

トップ メニュー

This web page is described in Japanese, but you can read in English by translation site.

  • このサイトはリンクフリーです。
  • コメント欄は改行せず一行で入れてください。
  • スパム判定ではじかれた場合は、その後に「書込みました」旨のみのコメント等何らかの書き込み成功していただけると早く対応できます。
  • 非日本語対応ブラウザからは書き込みできません。