PCサイトをスマホで見ると文字が拡大表示＆画面左上が拡大表示される時の解消方法！

最近「スマホ対応」が当たり前ですが、諸事情でPCのみで閲覧できれば良いなんて話で、PCサイトのみを制作する機会がありました^^;

でも実際は、「スマホで見た時にちょっと文字の大きさが違う」みたいなことを言われ…ちょっとだけ対応に手こずったので、対処方法をメモしておきます。

iPhoneで見た時の文字表示のバグを解消する

[html]
body {
-webkit-text-size-adjust: 100%;
}
[/html]

ただこれだけど反映しないので「viewport」の設定もしていきます。

「viewport」の設定といえばよく目にする以下のソース。

[html]
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
[/html]

これでPCサイトを見た時、画面左上が拡大されて表示されてしまいます。

これは「initial-scale=1.0」と設定してしまっているからだそう。

そこで、「viewport」の設定はこうしました。

[html]
<meta name=”viewport” content=”target-densitydpi=device-dpi, width=950, maximum-scale=1.0, user-scalable=yes”>
[/html]

この記述でいうと「width=950」というところが、PCサイトの横幅を指定してあげることで画面左上が拡大されるのは防げました^^

最近はレスポンシブやらでこういったことがめっきりなかったのですが、同じようなことがないとも言えなかったのでメモ代わり記事にしてみました。

ついでにこちらもメモ。

上記対策をしても、AndroidのChromeブラウザで見ると相変わらず…文字が拡大されてしまうので、以下のように設定する必要があります。

[html]
p {
max-height: 100%;
}
[/html]

これで今回問題だった…「文字が拡大して表示される」件は無事に解決しました^^

今後はこういったケースも減ると思いますが、絶対ない、とも言い切れないですから…忘れないうちに書き留めておきました^^;