web-dev-qa-db-ja.com

一部のフォントサイズがSafari（iPhone）で大きくレンダリングされる

Safari/iPhoneが一部のフォントサイズ設定を無視するCSSやその他の理由はありますか？私の特定のWebサイトでは、iPhoneのSafariがfont-size：15pxテキストよりも大きいfont-size：13pxテキストをレンダリングします。一部の要素でfont-sizeをサポートしていない可能性がありますか？

csssafarimobile-safarifont-size
100
Alex

Joeの応答にはいくつかのベストプラクティスがありますが、説明している問題は、テキストが小さすぎると思われる場合にMobile Safariが自動的にテキストをスケーリングするという事実に基づいていると思います。 CSSプロパティ-webkit-text-size-adjustでこれを回避できます。以下は、これをあなたの体に適用する方法のサンプルです。iPhone専用です。

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}
228
David Kaneda

また、ビューポートメタタグで初期ズーム設定を1に設定していることを確認してください。

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
11
johnpolacek

なしではなく100％を使用します

normalize.css これが含まれます

10
user3276706

ピクセル定義は本当に紛らわしく、ビジュアルサービス間でまったく同じではないため、ピクセル定義はもう使用しません。

ユニットを満たす

  1. 「Ems」（em）：「em」は、Webドキュメントメディアで使用されるスケーラブルな単位です。 emは現在のフォントサイズに等しくなります。たとえば、ドキュメントのフォントサイズが12ptの場合、1emは12ptに等しくなります。 Emは本質的にスケーラブルであるため、2emは24pt、.5emは6ptに等しくなります。EMは、スケーラビリティとモバイルデバイスに優しい性質により、Webドキュメントでますます人気が高まっています。
  2. ピクセル（px）：ピクセルは、画面メディアで使用される（つまり、コンピューター画面で読み取られる）固定サイズの単位です。 1ピクセルは、コンピューター画面上の1ドット（画面の解像度の最小区分）に相当します。多くのWebデザイナーは、ブラウザーでレンダリングされるサイトのピクセル完璧な表現を生成するために、Webドキュメントでピクセル単位を使用します。ピクセルユニットの1つの問題は、視覚障害のある読者の場合は上に拡大したり、モバイルデバイスに合わせて縮小したりしないことです。
  3. ポイント（pt）：ポイントは伝統的に印刷媒体（紙などに印刷されるもの）で使用されます。 1ポイントは1/72インチに相当します。ポイントは固定サイズの単位であり、サイズを拡大縮小できないという点で、ピクセルによく似ています。
  4. パーセント（％）：パーセント単位は「em」単位によく似ていますが、いくつかの基本的な違いはあります。何よりもまず、現在のfont-sizeは100％に等しい（つまり、12pt = 100％）。パーセント単位を使用している間、テキストはモバイルデバイスとアクセシビリティのために完全にスケーラブルなままです。
8
user384929

私は同じ問題を抱えていましたが、元のCSSには次の行がありました：

-webkit-text-size-adjust：120％;

100％に変更する必要があり、すべてがスムーズでした。すべてのpxをemまたは%%に変更する必要はありません。

0
me1974

また、操作している要素に「幅/高さ」が設定されていないかどうかを確認してください。Safariはsvgのフォントサイズよりもサイズを優先します。ChromeとFFはありません少なくとも現在はそうです。

0
marebuffi