サイトマップ 連絡先 最初に戻る 戻る 次へ進む
$Date: 2018-07-07 06:49:13 +0900 (2018/07/07 (土)) $
$Revision: 1347 $

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

リンク

説明

Google の モバイルフレンドリーテスト というテストがあります。これはスマホとかモバイル環境で表示させたときに快適に閲覧できるかをチェックするサイトです。

このページの中のテキストボックスに Web サイトの URL を入力するとモバイルフレンドリーかチェックしてくれます。
このサイトは長らくモバイルフレンドリーではなかったのでモバイルフレンドリーに対応したのでその内容を書きます。

モバイルフレンドリーにするために必要なことは Google デジタルワークショップ のワークショップで学びました。

キーワードはレスポンシブデザインです。このキーワードで検索して、 初心者も分かる!レスポンシブ・デザインの作り方 というサイトを見つけました。このサイトによるとビューポート(viewport)を設定する必要があるそうです。

上記サイトによれば以下のような記述を head に足せばいいみたいだ。
これだけで モバイルフレンドリーテスト にパスするようになりました。

<head>
	<!-- ビューポートの設定 -->
	<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
一応、このサイト内の HTML ファイルに上記記述を足すのに使ったスクリプトを紹介してきます。 update-viewport.py を GitHub で公開しています。
なお何らかのエラーでファイルの中身が失われたりする可能性があるので、実行前にバックアップを取るなり、バージョン管理されたコンテンツに対して実行してください

でも iPhone とかで pre タグの右端が切れてしまう問題がある。