html - iOSブラウザの違い

Question

この Web サイト (http://bluecodestudio.com/kipos/updates/new/) をデスクトップのブラウザーと iPhone のブラウザーで視覚化すると、厄介な違いがあり、修正できません。

iOS の Safari で表示すると、フォント サイズが小さい「p」タグが「h2」タグと同じフォント サイズで表示されます。

理由はどれですか？前もって感謝します。

Answer 1

モバイル Safari やその他の一部のモバイル ブラウザでは、読みやすくするためにテキスト サイズが大きくなることがよくあります。

次のルールを使用して、CSS でこれを無効にすることができます。

-webkit-text-size-adjust: 100%;

他のモバイル ブラウザー用の -moz および -ms プレフィックスもあります。

Answer 2

ブラウザー固有のデフォルト スタイルシート間の違いを避けるには、Eric のreset.cssまたは (私が好むもの) normalize.css
のようなものを使用し ます。

Answer 3

これは、モバイル デバイス用とデスクトップ用の異なるスタイルシートを使用しているためです。iPhone では、h2 は 23 ピクセル、p は 22 ピクセルであり、大きな違いは見られません。デスクトップでは、h2 が 20 ピクセル、p が 14 ピクセルで、これは大きな違いであり、すぐにわかります。

このようなことは、Mobile Safari の非常に優れた機能ですがあまり知られていない機能である Web インスペクターを使用して簡単に発見できます。Web インスペクターを使用すると、iPhone をデスクトップ コンピューターに接続してそれらを読み取ることで、iPhone に表示される Web ページの CSS やその他の詳細を確認できます。詳細はデスクトップ Safari で。わお。