Google ChromeとMozilla Firefoxは、エミュレータでレンダリングされた出力に関して同じ結果をもたらさないようです。もっと正確なエミュレータ、Google Chrome、Mozilla Firefox?
たとえば、Google Chromeでは、iPhone X(ポートレートモードでは375x812、デバイスのピクセル比率は3)のフォントは非常に小さいと表示されているようです。
私の計算によれば、72pxに設定されたh1はフォントサイズ24px(つまり、72/3、ここで3はデバイスのピクセル比率)になります。これはタブレットでは発生しません(たとえば、デバイスのピクセル比率が2のiPad Proなど)。
タブレットではフォントサイズが72px/2 = 36pxになると予想しましたが、そうではありませんでした。これは、ピクセル比率が1(デスクトップなど)のデバイスとして適切にレンダリングされました。
モバイルまたはピクセル比率が3以上のデバイスでのみ、この現象が発生するのはなぜですか?もちろん、フォントサイズがこれらすべてのデバイスで同じになるMozilla Firefoxでは、これは起こっていないようです。
この場合、どのブラウザのレンダリングが正しいですか? Google ChromeまたはMozilla Firefox?
スクリーンショットを以下に示します。
こんにちは!あなたのコードの[mcve]を提供してください - スタックオーバーフローに関するヘルプを求めるときに、スクリーンショットはコードの代用として受け入れられません。 – TylerH
ChromeやFirefoxには実際のシミュレータがありません。その背後にあるCSSエンジンは同じですが、タッチ入力やディスプレイサイズなどのエミュレーションもあります。実際のシミュレータが本当に必要な場合は、仮想デバイス –
を探してください。@TylerH。ありがとうございました –