Comprendre les tailles d'écran et la densité des pixels pour le développement Web (sites Web et courriels)

Question

J'essaie de comprendre certaines choses qui traitent des pixels.

Le premier est ce qui change entre le développement d'un email html et un site web en termes d'apparaître sur un écran mobile. Pour être plus précis, lors du développement d'un site web, je peux avoir des requêtes média inférieures à 375px (ie @medie screen et (max-width 375px)) et les changements survenant dans ce code ne seront pas reflétés sur le bureau entrer en inspection limiter leur largeur à 400px); Cependant, sur un téléphone qui a un écran plus petit comme mon iPhone SE, les changements qui se produisent sous cette requête média sont touchés. Donc, en soi, cela me semble logique, parce que l'écran de mon téléphone est plus petit que la largeur minimale de mon navigateur, bien sûr les changements que j'applique dans ce bloc frappent lorsque le site est exécuté sur mon téléphone. Mais maintenant, c'est là où une certaine confusion est introduite. Lorsque je développe un email HTML, j'ai une table de 600px de large. Il n'y a pas de requête média affectant ce code HTML. La table est 600px de large en toutes circonstances, donc en affichant sur mon téléphone de moins de 600px, je supposerais qu'une partie de la page serait coupée, mais ce n'est pas le cas. Lorsque vous affichez l'e-mail dans quelque chose comme GMAIL, la composition entière est visible. Cela m'a fait me gratter un peu la tête, alors j'ai fait des recherches et trouvé des sources prétendant que ce téléphone est en réalité plus grand que 600px de large. Donc, ma pensée est que la densité de l'écran est juste supérieure à celle de mon ordinateur portable, ou peut-être sa magie que GMAIL applique, mais de toute façon, l'email apparaît comme sur mon ordinateur portable dans une largeur de plus de 600px.

J'utilise ces balises meta

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

et j'ai une compréhension de base de ce qu'ils font, mais comment contribuent-elles au mobile exactement?

En résumé, mes questions principales sont les suivantes:

• pourquoi est-ce que mes questions des médias avec des sites Web qui fonctionnent max-width: 375px frappé mon téléphone, mais une table qui est toujours 600px large est entièrement visible en même temps? Est-ce une question de densité de pixels de l'écran, ou est-ce un peu plus complexe?

• Quels sont les rôles joués par ces balises META exactement?

Un aperçu que vous pouvez fournir serait très apprécié. Je vous remercie.

Answer 1

pourquoi est-ce que mes questions des médias avec des sites Web qui fonctionnent max-width: 375px a frappé mon téléphone, et encore une table qui est toujours 600px large est un pleinement visible en même temps?

Parce que votre téléphone le port visuel a en fait une largeur de 1136 pixels et une hauteur de 640 pixels.

est-ce une question de densité de pixels de l'écran, ou est-ce un peu plus complexe?

est une question de densité de pixels de l'écran, le rapport de pixels par défaut dépend de la densité d'affichage:

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) 

pour l'iPhone SE son 326 ppi (pixels par pouce).

Quels sont les rôles joués par ces balises META exactement?

La balise sa ne fait pas partie d'une norme Web et il a été introduit par Safari Mobile, la propriété width contrôle la avec la taille de la fenêtre, device-width sa valeur spéciale, c'est une utilisation typique de l'étiquette:

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

qui définit la largeur à la largeur de la zone de visualisation de l'appareil, et un zoom de 1, la largeur de son en CSS pixels il ne prend pas en compte la densité de pixels du tout. En changeant la valeur de la balise meta avec JavaScript, le site web réagira à la nouvelle valeur. Essayez de définir la largeur à 375px pour voir ce qui se passe dans votre téléphone.

Vérifiez ce 2 articles:

• pixel its not a pixel
• 2 viewports