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

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

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

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

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

normalize.cssにはこれが含まれています

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

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

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

ユニットに会う

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

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

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

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

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