googleに、「ページがモバイル フレンドリーではありません。」と言われました。これは不当です。そして<meta name="viewport" content="width=device-width">を加えただけで、「このページはモバイル フレンドリーです」となりました。単純すぎます。そのうち改良されるでしょうから、こんなのは放っておいてもいいのですが、一番大切なところで間違っているので一言言っておきたいのです。
この表示は、誰にでも見えるものではなく、Search Console に自分のサイトを登録した状態で、google検索して自分のページが表示された時に、サイト所有者への注意として表示されるもののようです。
こんな表示です。
合わせて、androidのブラウザで、tableやpreタグの内容が異常に小さくなるという現象を何とかしたいので、テストページを作ります。
そもそもウェブページはコンピュータハードウェアの違いを越えて文章と画像を交換するための手段としてスタートしました。画面の大きさなどのハードウェアや利用するソフトウェアが異なってもデータを共有できることができるように考えられています。
htmlの基本的なタグを使うだけで、画面の小さい機械を使っている人や、ウィンドウを小さくして読みたいという人にもそれなりのレイアウトが可能です。
もちろん現在はそうでないページもたくさんあります。私がhtmlを学び始めたのはhtmlのバージョンが3.2から4.0に変わろうとしていた時でしたが、「このページは横幅1024pxで見てください」との但し書きが普通にありました。せっかく画面の幅に自由になっていて、cssもそれを活かせるように変わろうとしているのに、世の中は固定幅に向かってしまいました。次第に一般的なコンピュータの最低と思われる大きさの画面に合わせて画面幅を固定して設計するのが普通になったようです。
それでも、「画面の小さい機械を使っている人」や「文字を大きくしないと見えにくい人」を想定してページを作って来ました。
スマートフォンが出てきて、やっと「画面の小さい機械を使っている人」がいることを理解できるようになると思いました。私のページはほぼ問題なく表示されると思っていました。そもそも「モバイル フレンドリー」なはずです。
ですから、今回の「ページがモバイル フレンドリーではありません。」はとても心外でした。
googleはモバイル フレンドリーテストというページを提供していて、URLを入れるとテストしてくれます。
私のサイトの入り口のページをテストすると次のようになります。
このページには、h1,h2,などにfont-sizeの指定をしていますが、font-size:150%;などと%単位の指定をしています。テキストが小さいというのは私のせいではありません。
ビューポート指定は確かにありませんでしたが、<meta name="viewport" content="width=device-width">は私に言わせればデフォルトでそうなっているはずのものです。ディスプレイに合わせて表示すれば良いのであって、私のページにはそれを邪魔する要素は1つもありません。
試しに、他はそのままで、<meta name="viewport" content="width=device-width">だけを加えて再度テストをしました。結果は、
これでいいんですかね。
横幅を固定して1024pxで見ることを前提に設計するのは モバイル フレンドリー ではない。これは確かですが、<meta name="viewport" content="width=device-width">と書いていないのは モバイル フレンドリー ではない。というのは筋が違うと思います。
実験したページをそのまま残して、その後に「まとめ」を置く構成です。環境により、また時代の変化により、変わっていくのかを検証したいという理由でそのまま残してあります。