[805] モバイルフレンドリーその1、ビューポートの設定

~スマホが変えたHTML文【ピクニックを始めたコンテンツたち】~

グーグル嬢は、スマホに優しくしないと、一人前として認めてくれない。
その結果、検索順位が低かったり、そもそも検索エンジンの対象にしてくれなかったりする。

そうなると、「PCユーザーだけを相手にしていればいい」とも言っていられません。
彼らだって、検索エンジンを利用するのですから。
つまり、ホームページを作成する際、もはや「スマホによる閲覧」は無視できないわけです。

じゃあ、何をもって「スマホに優しい」を判じればいいのか。
その答が、グーグル嬢の提供する「モバイルフレンドリーテスト」です。
任意のURLを打ち込むだけで、自動的に解析してくれます。

805.gif
現「山ガハ」の悲惨な現状・・・その前に、日本語としておかしいだろ

主に3つの要因から答を出してくれるようですが、今回は、このうちの、
「ビューポートが設定されていません」
について、対策を講じていきます。

必要なことは、すべてのページのヘッダーに、
meta name="viewport" content="width=device-width, initial-scale=1.0"
を付け足すだけ。(最初と最後に< >が必要です)
何も考えず、おまじないか何かのようにコピペしてください。環境ごとのアレンジも全く不要。
以上、終了です。

一応ですが、その意味するところは、
meta name="ビューポートについてお嬢がうるさいから、一応、気を配ってやったよ" content="コンテンツの配置は、デバイス幅に合わせてね。コッチじゃ、意図的なデザインをしないから, initial-scale=文字や画像の拡大倍率は1:1でお願いします。16Qの文字は16Qだし、300ピクセルの画像は300ピクセルで"
といった感じでしょうか。

ここで、不思議に思った方はいらっしゃいませんか?
なぜなら、同じことは、HTML文内でも行えるからです。
「width=100%」で、以上、終了じゃないですか。
ところが、さにあらず。
メタ属性で規定・・・つまり、ヘッダー内で宣言しないと、グーグル嬢は許してくれません。
たった70文字を入れるかどうかで、受ける扱いが全く違うのです。
お嬢・・・ちょっと、乱暴じゃないですか?

それはそれとして。
この呪文をすべてのページに貼り付け、再度「モバイルフレンドリーテスト」を試みたとろ、残り2つとなりました。
次回は、「テキストが小さすぎて読めません」について取り上げていきます。

◆ライターとしての蛇足
このページ「は」モバイル フレンドリーで「は」ありません
このページを分析した結果、モバイル フレンドリーと「は」いえません

このページ「は」、モバイル端末で「は」使いにくい可能性「が」あります
このページをモバイル端末で閲覧した場合、使いにくい可能性「が」あります。

お嬢、人のHTML文を指摘する前に、自分の日本語を学び直せ!
スポンサーサイト

コメントの投稿

非公開コメント

お仕事のお問い合わせ
カレンダー
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
プロフィール

てつまる

Author:てつまる
神奈川県を中心にフリーで活動しているライターです。
超IT系を除き、医療・各士業・経営者・アスリートへの取材、アーティストプロモート(情報発信)、イベントレポなどを手がけています。

最新記事
カテゴリ
お世話になっているサイト様
最新コメント
最新トラックバック
コトバカウンター
special thanks to
検索フォーム
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QR