ホームページを更新し続けて、10年以上。デザインは全く無視。更新頻度と、内容？で運営してきました。 時代が変化し、スマホの登場。発売当初は解像度が低く、そんなに字が小さくなりませんでした。
しかし、最近のスマホは、ヘタなディスプレイよりも解像度が高くなっています。普通に表示していたら、豆粒みたいになっていまいます。
拡大すると、文章全体が表示されず、チマチマスクロールする必要がでてきます。一体どうしたらいいのかなぁ・・・
長らく放置していましたが、自分自身、読んでいて気分が悪いので、ちょいと勉強してみることにしました。
いろいろ調べていると、この言葉にいきつきました。技術の進化に従って、ＨＴＭＬ？ウエブ技術も進化しているようなのです。あれこれ調べていると・・・ いまいち、よくわからん・・・。 単語がわからんときつい・・。 なになに・・ＧＯＯＧＬＥ推奨の文章がある？
TL;DR
meta viewport タグを使用して、ブラウザのビューポートの幅とスケーリングを制御します。
width=device-width を追加して、デバイス非依存ピクセルで画面の幅を合わせます。
initial-scale=1 を追加して、CSS ピクセルとデバイス非依存ピクセルが 1:1 の関係になるように指定します。
ユーザーによるスケーリングを無効にせず、確実にページを見れるようにします。
<meta name="viewport" content="width=device-width, initial-scale=1">
これ設定しろって意味らしい。
サンプルもあり、ものすごくわかりやすいページでした。日本語うまいなぁ・・・自動翻訳？ならすごいな。 ＴＬ；ＤＲの意味は、Too long; didn't read 長くて読めないよー 、つまり、要約
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {max-width:100%;height:auto;}
</style>
この2行をHEADの間に追加でいい感じに
<meta name="viewport" content="width=device-width, initial-scale=1">
表示される画面に合わせて、文字の大きさとか、改行などを自動レイアウトしてくれるみたい。ただし、これだけだと、640幅の画像が小さく表示されたりする。うまくいかなくて、悩む。
<style>
img {max-width:100%;height:auto;}
</style>
こいつで、画像の幅を画面幅に合わせてくれる。自動ズームという感じ。画面を広げたり、縮めたりすると、自動的に調整してくれる。
あとは、文字サイズの大きさ、<font size="5"> とか使っていたけど、これが使われなくなっているらしい。 <h3>とかでサイズ指定
下にサンプル画像を添付 ちょっと読みやすくなったかな・・。どうだろうか？
いろいろな設定を使うと、解像度ごとに複数の設定を使い分けられる様子。一つのＨＴＭＬでホームページ用から、スマホ用とか・・・ 奥が深そう・・。
自分は気楽に読めて画像が見えたらいいので、この辺でやめておこうと思います（笑）
高解像度画像も、画面サイズに自動調整される