ウェブ開発（ウェブサイトとメール）のスクリーンサイズとピクセル密度の理解

Question

ピクセルを扱ういくつかのことを理解しようとしています。

最初は、モバイル画面に表示されるという点で、HTML電子メールとWebサイトの間でどのような変更が行われたのですか。具体的には、ウェブサイトを開発する際に、375px（@medie画面と（最大幅375px）以下）で実行されるメディアクエリを持つことができ、そのコードで発生した変更はデスクトップに反映されません検査に入ると400pxで幅が制限されます）。しかし、私のiPhone SEのように画面が小さい携帯電話では、このメディアクエリで発生する変更がヒットします。

携帯電話の画面が私のブラウザの幅よりも小さいので、私の電話画面が私の電話で実行されたときに当然そのブロックに適用される変更が当てはまります。しかし、今ではいくつかの混乱が導入されています。 HTML電子メールを作成するときは、600pxの幅に設定されたテーブルがあります。このHTMLに影響するメディアクエリはありません。テーブルはすべての状況で600pxの幅であるため、600px未満の電話機で表示すると、ページの一部が切り取られると思われますが、そうではありません。 GMAILのようなもので電子メールを表示すると、コンポジション全体が表示されます。これは私の頭を少し傷つけるようにしたので、私は研究して、この電話が実際には600pxよりも広いと主張するいくつかの情報源を見つけました。だから私の考えは、画面の密度が私のラップトップのそれよりも大きかったり、GMAILが適用している魔法のほうが大きかったりしていますが、どちらの方法でも、600pxを超えるブラウザの幅でメールが表示されます。

私は、これらのメタタグ

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

を使用していると私は、彼らが何をすべきかの基本を理解しているが、これらは正確に携帯電話にどのように貢献するのですか？要約すると

次のように、私の主な質問は以下のとおりです。375px自分の携帯電話を打つ、まだ常に600PX広いテーブル：

• なぜそれが最大幅を実行するウェブサイトと私のメディアクエリがあることです同じ時間に完全に見ることができますか？

• これは画面のピクセル密度の問題ですか、それとも少し複雑ですか？

• これらのメタタグはどのような役割を果たしますか？

あなたが提供できる洞察は非常に高く評価されます。ありがとうございました。

Answer 1

なぜそれが最大幅を実行するウェブサイトと私のメディアクエリということです：375pxは自分の携帯電話を打つ、まだ常に600px広いテーブルには、完全に閲覧可能 同じ時間ですか？

電話ビジュアルポートの幅は、実際には1136ピクセル、高さは640ピクセルです。

これは画面のピクセル密度の問題ですか、それとも少し複雑ですか？

その画面の画素密度の問題、既定のピクセル比が表示濃度に依存する：iPhone SEその326のPPI（インチあたりのピクセル）についての

Default ratio when the viewport scale equals 1 
Display density < 200dpi Ratio = 1.0 
Display density > 200dpi && Display density < 300dpi Ratio = 1.5 
Display density > 300dpi Ratio = integer floor(density/150dpi) 

。

これらのメタタグはどのような役割を果たしますか？

タグ任意のウェブ標準のその一部ではない、それがモバイルサファリによって導入された、幅プロパティは、ビューポートのサイズ、device-widthその特別な値に制御し、これはタグの典型的な使用である。

デバイスビューポートの幅と幅、及び1のズーム、それがすべてのアカウントの画素密度に取るdoesntの CSS pixelsの幅を設定し、その

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

。 JavaScriptでメタタグの値を変更すると、ウェブサイトは新しい値に反応します。 幅を375pxに設定して、携帯端末の状況を確認してください。

チェックこの2件の記事：

• pixel its not a pixel
• 2 viewports