Google の モバイルフレンドリーテスト というテストがあります。これはスマホとかモバイル環境で表示させたときに快適に閲覧できるかをチェックするサイトです。
このページの中のテキストボックスに Web サイトの URL を入力するとモバイルフレンドリーかチェックしてくれます。
このサイトは長らくモバイルフレンドリーではなかったのでモバイルフレンドリーに対応したのでその内容を書きます。
モバイルフレンドリーにするために必要なことは Google デジタルワークショップ のワークショップで学びました。
キーワードはレスポンシブデザインです。このキーワードで検索して、 初心者も分かる！レスポンシブ・デザインの作り方 というサイトを見つけました。このサイトによるとビューポート(viewport)を設定する必要があるそうです。
上記サイトによれば以下のような記述を head に足せばいいみたいだ。
これだけで モバイルフレンドリーテスト
にパスするようになりました。
<head> <!-- ビューポートの設定 --> <meta name="viewport" content="width=device-width,initial-scale=1"> </head>一応、このサイト内の HTML ファイルに上記記述を足すのに使ったスクリプトを紹介してきます。 update-viewport.py を GitHub で公開しています。