古いサイトにViewport(表示領域)を設定してみました。

Google AdSenseから「本日の AdSense ヒント: モバイル ユーザー向けの表示領域を設定する」というタイトルのメールが来ました。

————————————————————————————————————————
サイトのマルチスクリーン対応は時間がかかるかもしれません。
そこで本日は、サイトを再構築するまでの間、ユーザー エクスペリエンスを改善するヒントをご紹介します。

Viewport(表示領域)を設定すると、ご自身のウェブサイトをモバイルのサイズに合わせて表示することができます。
設定しないと、パソコンと同じ形式で縮小表示されるだけになり、ユーザーエクスペリエンスが損なわれてしまいます。
Viewport(表示領域)を設定して、すべてのデバイスでページを見やすく表示しましょう。
————————————————————————————————————————

現状、うちのサイトでは41%がモバイルからのアクセスだそうです。

————————————————————————————————————————
推奨される解決方法
携帯端末に適切に表示されるよう最適化されたページには、ドキュメントの先頭に width=device-width、initial-scale=1 を指定したメタ ビューポートが含まれています。

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
————————————————————————————————————————

このメタタグを、head内のtitle の上あたりに付け足します。(<>は半角に直してください)

iPhone5で見ると、メタタグ挿入前
↓↓↓↓↓↓↓↓↓↓
メタタグ挿入前

メタタグ挿入後
↓↓↓↓↓↓↓↓↓↓
メタタグ挿入後

となり、文字が大きくなって見やすくなっています。

このサイトはDreamweaverで作成したサイトで、これからスマホ対応させるとなると、非常に面倒…
ていうか、対応の仕方が複雑すぎてわかりませ~ん(´Д`)

vol.2として、WordPressで新たにサイトを作成していますので、古いサイトはそのまま運営して行こうと思っています。

Googleさんからの注意ポイントとして
————————————————————————————————————————
その他の考慮事項
minimum-scale、maximum-scale、user-scalable を避ける
最小および最大ズームを設定したり、ビューポートをズームする機能を完全に無効にしたりできます。
これらのオプションはアクセシビリティに悪影響を与えるため、通常は避けてください。
————————————————————————————————————————

検索してみると、minimum-scale、maximum-scale、user-scalableを指定しているサイトが多いのですがGoogleが非推奨としているので避けた方が無難ですね。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする