2011年02月22日

【第72回】iPhone用の文字サイズ自動調整を解除する

さて、実は前回で、iPhone用トップページのデザインは出来上がっています。

しかし、ここでちょっと注意事項があります。

こちらの図をご覧下さい。

▼▼▼ 変更前 ▼▼▼
<縦表示>
SD_069_01.PNG

<横表示>
SD_069_02.PNG

縦表示の時と横表示の時で、文字サイズが大きく変わっているのがわかるでしょうか。

これ、実はiPhoneのSafariの機能の一つ、文字サイズの自動調整機能なのです。

iPhone版Safariは、小さい画面に効果的にWEBページを表示するために、画面やページの幅、他パーツとの相対的な位置付けなどに応じて、文字サイズを自動で拡大してくたりします。
非常に便利な機能ですね。

でも今回の私のデザインでは、どちらかというと文字サイズは変わってくれない方がありがたいです。

そこで今回は、この文字サイズの自動調整機能を解除してしまいましょう。

▼▼▼ 変更後 ▼▼▼
<縦表示>
SD_072_01.PNG

<横表示>
SD_072_02.PNG


★iPhone用の文字サイズ自動調整を解除する方法★

body要素の中に、-webkit-text-size-adjust: none;を追記する。

▼▼▼ 変更前 ▼▼▼
body {
margin: 0;

/* 【第67回】で背景色を白に変更 */
background-color:#FFFFFF;

}

▼▼▼ 変更後 ▼▼▼
body {
margin: 0;

/* 【第67回】で背景色を白に変更 */
background-color:#FFFFFF;


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

この修正で、iPhoneを縦にしても横にしても、同じ文字サイズで表示されるようになります。
やっぱり個人的には、こちらの方が好みです。

さて、これでiPhone用トップページのカスタマイズは終了です。

次回からは、iPhone用記事ページのカスタマイズに入っていきましょう。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | iPhoneブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。