iPhone_html/css_WEB-ITnose でフォントが大きくなる問題について

最初のテクニカル ブログ モバイル テストをデプロイしたとき、ブログ テーマが自分で設計および実装されたため、コード部分のフォント サイズが明らかに大きくなり、周囲と互換性がないことがわかりました。 、この明らかなスタイルの問題は、挑発的な魚の骨のようなもので、人々を非常に不快にさせます

具体的なパフォーマンスは、左下の図に示すとおりです

。何が起こっているのでしょうか? この部分の関連するスタイル属性を次のように定義します。

font-size: 0.8rem;font-family: PT Mono, Consolas, Monaco, Menlo, monospace;

論理的に言えば、コード部分もスケールダウンする必要があります。なぜ機能しないのでしょうか? この時点では、この問題は iPhone スマートフォンでのみ発生するようですが、Android スマートフォンでは問題なく動作することがわかりました。特定の要素にフォントを適用すると、システムがフォールバックする (つまり、font-family の値が順序付けされたフォント セットである) 場合、ブラウザは前のフォントの一部を前から後ろに 1 つずつサポートしようとします。フォント間の解像度が異なるため、フォントはサポートされていません。同じフォント サイズが定義されている場合でも、視覚的なサイズが異なるため、上記の現象が発生します。

解決策: -webkit-text-size-adjust

text-size-adjust この属性を使用すると、モバイル デバイス上で同じサイズを維持するために、異なる解像度のフォントを計算できます。その値を適切なパーセンテージに設定するだけです (たとえば、100% に設定します)。iPhone では、-webkit-text-size-adjust でこの問題が解決されます。