2017-12-15 9 views
-5

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?

スクリーンショットを以下に示します。

Google Chrome Screenshot

Mozilla Firefox Screenshot

+0

こんにちは!あなたのコードの[mcve]を提供してください - スタックオーバーフローに関するヘルプを求めるときに、スクリーンショットはコードの代用として受け入れられません。 – TylerH

+1

ChromeやFirefoxには実際のシミュレータがありません。その背後にあるCSSエンジンは同じですが、タッチ入力やディスプレイサイズなどのエミュレーションもあります。実際のシミュレータが本当に必要な場合は、仮想デバイス –

+0

を探してください。@TylerH。ありがとうございました –

答えて

0

このようなメタタグが含まれます。

<meta name=viewport content="width=device-width, initial-scale=1"> 

ほとんどの人が何も知らずに質問を下します。彼らは基本に行くだけではなく、ブートストラップのようなフレームワークに依存せずにサイトを構築できない人たちです。そこにこれはすでにそれが専門家によって世話されている問題ではありません。

詳細については、this excellent w3schools article