PC向けに作った Web サイトをスマートフォンでみると、「 部分的に意図せず文字が大きくなる 」といった不具合が起きることがあります。
解決策ググって修正しようとすると、こんどは「 毎回、ページの左上が拡大された状態で表示されてしまう 」状況に陥ってしまうことがあります。
（私はありました。）
ということで、PC向けサイトも最低限スマートフォンで見られるようにする方法をメモっときます。
勝手に文字が大きくなる対策
body {
-webkit-text-size-adjust: 100%;
}
-webkit-text-size-adjust という、モバイル版ブラウザでのみ有効なプロパティがあるようです。
このプロパティが、デフォルトでは auto になっているため、文字が自動的に調整されて大きくなってしまう、というカラクリでした。
reset.css あたりに追記しておくのが妥当かと思います。
参考：iPhone版Safariで文字サイズがおかしくなるときは-webkit-text-size-adjust: 100%; を指定する
Android でも -webkit-text-size-adjust が効くように
<html>
<head>
<!-- 省略 -->
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, maximum-scale=1.0, user-scalable=yes">
<!-- 省略 -->
Android では -webkit-text-size-adjust プロパティを指定しただけでは、どうやら反映されないようです。
キモは ViewPort の scale 指定 です。 scale の指定には、以下の3つの種類があります。
- initial-scale ... 初期拡大倍率
- minimum-scale ... 最小拡大倍率
- maximum-scale ... 最大拡大倍率
このうち initial-scale または maximum-scale を含めることで、Android でも -webkit-text-size-adjust の設定が反映されるようになります。
ただし initial-scale を指定してしまうと、画面の横幅ピッタリにページ全体が表示されなくなってしまいます。
したがって maximum-scale を含めるのが妥当かと思います。
画面左上が拡大表示されてしまうのは、「 initial-scale=1.0 」と指定してしまったからですね。
参考：-webkit-text-size-adjustはscaleを指定しないと有効にならない
width について
上記の例では width に device-width を指定しました。
これにより横幅がブラウザサイズに追随するレイアウト（リキッドレイアウト）に対応できます。
しかし、よくある 横幅固定ページ（ソリッドレイアウト）の場合、 ViewPort の width は絶対指定しておいたほうがいい です。
<meta name="viewport" content="target-densitydpi=device-dpi, width=960, maximum-scale=1.0, user-scalable=yes">
例えばメインコンテンツは横幅 960px 固定で、ヘッダやフッタだけブラウザの横幅いっぱいに背景画像を表示させる場合、 width に device-width を指定してしまうとそのデバイスの横幅で背景画像が途切れてしまいます。
理由は、その背景画像のエレメントに CSS で指定された width: 100% が、device-width からの相対値として計算されるためです。device-width が 360px であれば、 360px で途切れてしまうのです。
width=960 のように、「最低限表示させたい横幅」を指定することで、960px のうちの 100%、つまり 960px の幅だけ背景画像が表示されるようになります。
以上ですが、ほかに初期対応として有効なものがあれば追記します。
- 2013/10/30 ViewPort の width について追記しました。
まとめ
CSS html もしくは body に、 -webkit-text-size-adjust: 100%; を指定する
ViewPort 指定で -webkit-text-size-adjust を有効化する
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, maximum-scale=1.0, user-scalable=yes">
<meta name="viewport" content="target-densitydpi=device-dpi, width=固定値, maximum-scale=1.0, user-scalable=yes">