携帯電話のフォントサイズとデスクトップのサイズとの差

Question

HTMLとCSSを使用してウェブサイトを作成していますが、すべてのプラットフォームの文字サイズの違いを誰かが知っているかどうかは不思議でした。

フォントサイズを20pxとしてデスクトップに作成した場合、モバイルでは非常に小さく見えるので、モバイルデバイスでフォントサイズが大きくなることはありませんか？

Answer 1

あなたは正しいです。 サイジング要素のEM（要素単位）とREM（相対要素単位）を見てください。はいテキストは、超小型になり、正しいmetaタグなしで

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

Answer 2

：また、あなたのヘッダーに次のコードを追加すると、あなたの問題を解決する可能性があります。

...モバイルデバイスのフォントサイズは通常大きいですか？

いいえ、通常はありません。にあるように、反応性の高いバージョンを提供するほとんどのサイトでは、font-sizeに80px（または何でも）であるとは言わないので、テキストは超小型ではありません。

モバイルデバイスは、デバイス幅として知られています。このデバイスの幅は通常、CSSピクセルあたり複数のデバイスピクセルをパックします。私は4：1のデバイスピクセルピクセルのCSSの比率を持つサムスンギャラクシーS6があります。つまり、CSSピクセルあたり4つのデバイスピクセルがあります。このデバイスの解像度（デバイスピクセル）は1440 x 2560ですが、CSSピクセルの解像度は360 x 640です。

デスクトップコンピュータでサイトを開発し、要素の幅を100ピクセルと指定すると、実際にはCSSピクセルを使用します。ほぼすべてのデスクトップモニタにデバイスピクセルとCSSのピクセル比率が1：1であるため、デバイスピクセルと思ったことがあります。

レスポンシブメタタグを使用している場合、要素が300ピクセル幅になるように指示すると、要素は1440ではなく360 CSSピクセル幅のキャンバスに塗りつぶされるため、画面の幅の大部分を占めますデバイスのピクセルワイドキャンバス（これは適切なmetaタグなしで起こり、のサイトがモバイルデバイス上でのように表示されます）。

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

参考リンク：

• Quirks Mode, A pixel is not a pixel is not a pixel
• WebPlatform Docs, Understanding CSS Units
• mydevice.io - 現在のデバイスの設定を表示します。
• mydevice.io/devices

うまくいけば、すべてが理にかなって、私はそれを維持するためにしようとした "シンプル。"