スポンサーサイト このエントリーを含むはてなブックマーク

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[CSS]iPhoneやiPadからブログを見ると文字が大きくなったり小さくなったりする このエントリーを含むはてなブックマーク

css.png
iPhoneやiPadからfc2などのブログのPCページを表示させた場合に、文字が大きくなったり小さくなったりする現象への対応方法。

あれはね、Safariのフォントサイズ自動調整機能が原因らしいよ

Safariさんは凄く気が利くので、WEBページを見やすいようにフォントサイズを自動調整してくれるブラウザです。
でもこれが原因で、iPhoneやiPadからPC用ページを表示させた場合に、フォントサイズがおかしなことになってしまう、というかなんか大きくなったり〜小さくなったり〜を繰り返す場合もあります。

Safariの自動調整機能を無効にしてしまおう

無効化したいクラスに対して、-webkit-text-size-adjust: none;を追記することでSafariの自動調整機能を無効にすることができるよ。
CSS例
h2 {font-size:80%;
-webkit-text-size-adjust: none;}

あるいは、もうbodyクラスすべてに適用してしまっても良いと思うよ

body{-webkit-text-size-adjust: none;}

これだけでiPhone, iPadからも快適にPC用ページを表示させることができます。

今の時代スマホやタブレット端末からのアクセスというのは無視できない数がありますから、そういった読者さんも快適に見やすいブログ作りを心がけると良いのだと思います。
COMMENT
承認待ちコメント
このコメントは管理者の承認待ちです
2015/05/15(金) 19:40:44 || # [EDIT]
COMMENT FORM
  • URL:
  • comment:
  • password:
  • secret: 管理者にだけ表示を許可する
TRACK BACK
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。