web-dev-qa-db-ja.com

iPhoneのフォントサイズの問題

私は現在、モバイル版のWebサイトに取り組んでいますが、すべてが素晴らしく、iPhone、Blackberry、Androidで正常に動作します。

ちょっとした問題が1つあります。大したことではありませんが、それでも少し面倒です。私が持っています：

<h1>タグを18pxに設定して太字
<h2>タグを12pxに設定して太字
<p>タグを12pxに設定して通常

これで、iPhoneで縦向きで表示するとすべてが見栄えが良くなりますが、デバイスを横向きに回転させると、<h1>のタイトルが小さくなります（わかりにくいですが、<h2>タグよりも小さい可能性がありますか？！

これが私のCSSです：

h1 {
 color:#FFFFFF;
 font-size:18px;
 line-height:22px;
 font-weight:bold;
 margin-top:0px;
}

h2 {
 font-size:12px;
 color:#333333;
 font-weight:bold;
 margin-bottom:-5px;
}

p {
 color:#333333;
 font-size:12px;
 line-height:18px;
 font-weight:normal;
}
iphonehtmlcssmobilemobile-safari
25
Ryano

私はあなたがあなたのCSSでこれを探していると信じています：

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
60
Barrie Reader

古いスレッドでuser612626が述べているように、より良い解決策は、なしではなく100％を使用することです。 iPhoneでのフォントサイズのレンダリングの不整合

body {
    -webkit-text-size-adjust: 100%;
}

このようにして、デスクトップWebkitブラウザーは、サイズとズームを比例的に調整することもできます。これは、画面サイズでフィルタリングするよりも優れたアプローチだと思います。

それが役に立てば幸い。

17
Cazuma Nii Cavalcanti

Neurofluxationの回答に記載されているように、cssルール-webkit-text-size-adjustを使用できますが、これにより、ユーザーがデスクトップWebkitのフォントサイズを調整できなくなる可能性があることに注意してください（詳細については、 この記事 を参照してください）。 ）。

これに照らして、CSS3メディアクエリ（またはユーザーエージェント）を介して安全であるかどうかを確認する価値があると思われます。

例えば。、

@media only screen and (max-device-width: 480px) { 
    html {
        -webkit-text-size-adjust: none; 
    }
}
14
AlexD