「h1,h2,pだけのページ」「viewportを加えると」「div,footerなどを使う」のまとめです。
使用した環境は Android 6.0.1 上の Chrome 60.0.3112.107 です。
Android上のスクリーンショットです。画像は50%に縮小した上に更に表示で50%にしています。デザインが同じなので同じ大きさだと本文と画像が区別しにくくなるからです。クリックで元の大きさの画像が出ます。
文字の大きさを指定せず、viewportの設定もしていないページです。
テキストが小さすぎて読めません
ビューポートが設定されていません
クリック可能な要素同士が近すぎます
最初の「前 目 次」以外は期待通りに表示されています。それに対して「前 目 次」はとても小さくなっています。
この部分はmarginを%単位で指定してはいますが、pタグです。
本文のpタグ内の文字と比較してみましょう。画像処理ソフトで切り貼りしてみました。
およそ3倍の違いになります。一般にh1,h2の文字はpに対して大きく表示されますが、特に指定しなければブラウザに任せられます。しかし、同じpタグの文字をここまで小さくし、自分で小さくしたものに対して「小さすぎて読めない」というのは一体どういうことでしょう。
最初の「前 目 次」も期待通りに表示されています。全体的に若干文字が大きくなり、h1,h2もより大きくなっています。
このページはモバイル フレンドリーです
「前 目 次」はそれぞれ、前のページ,目次,次のページへのリンクです。もともとdivタグに入れられてposition: fixed の指定をしてスクロールしても右上に固定されるようになっています。この position: fixed や div に入れたことが文字を小さくされる原因かと考えて p で普通のリンクにして確認したものが、「h1,h2,pだけのページ」です。
では、divタグに入れて position: fixed 指定をして、viewport指定なら文句はないかとやってみたのが、これです。
このページはモバイル フレンドリーです
divタグも position: fixed も正常に機能しています。
⇧が小さいのは、フォントが半角文字の範囲の文字として設計されているからでしょう。フォントによって変わってきますが、ウェブページに於いてフォントにこだわるのはやめておきましょう。OSが異なると当然用意されたフォントは違います。
まあ、最初の文字を小さくされたくなかったら、viewportを指定しろと、人質を取られたような感覚になってしまいますが、従うことにしましょう。
<meta name="viewport" content="width=device-width"> を加えます。
いまのところiphoneでの状況を確認できていませんが、Android-Chromeと同じような状況と推測しています。
またJavaのページの経験では、preとtableについて問題があることがわかっています。
例えば、preタグの部分は文字がとても小さくなります。これはvewportの指定でも変わらず、かえって指定したことでpre以外の部分もpreに合わせて縮小してしまうことになります。
PC上のブラウザのようにpreではみ出したら横スクロールというようにはなってくれないのです。
また、画像の見せ方も縮小・拡大が気軽にできるようになっているので調べ直すことが必要かも知れません。
PCもmobileも同じページで済ませることにこだわって、実験していきます。