了解 Web 开发（网站和电子邮件）的屏幕尺寸/像素密度

Question

我试图了解一些与像素有关的事情。

首先是开发 html 电子邮件和网站在移动屏幕上出现方面的变化。更具体地说，在开发网站时，我可以让媒体查询运行在 375 像素以下（即@medie 屏幕和（最大宽度 375 像素）），并且该代码中发生的更改不会反映在桌面上（因为大多数浏览器没有进入检查将它们的宽度限制在 400px);但是，在像我的 iPhone SE 这样屏幕较小的手机上，在此媒体查询下发生的更改确实会受到影响。

所以这对我来说很有意义，因为我的手机屏幕小于我的最小浏览器宽度，当然，当网站在我的手机上执行时，我在该块中应用的更改会生效。但现在是引入一些混乱的地方。在开发 HTML 电子邮件时，我将表格设置为 600 像素宽。没有影响此 HTML 的媒体查询。该表格在所有情况下都是 600 像素宽，因此当在我的小于 600 像素宽的手机上显示时，我会假设某些页面会被剪裁，但事实并非如此。在诸如 GMAIL 之类的电子邮件中查看电子邮件时，整个作品都是可见的。这让我有点摸不着头脑，所以我研究并找到了一些声称这款手机实际上大于 600 像素宽的消息来源。所以我的想法是屏幕密度比我的笔记本电脑大，或者它可能是 GMAIL 正在应用的一些魔法，但无论哪种方式，电子邮件都会在我的笔记本电脑上以大于 600 像素的浏览器宽度显示。

我正在使用这些元标记

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

我对他们的工作有一个基本的了解，但这些对移动有何贡献？

总的来说，我的主要问题如下：

• 为什么我对运行 max-width: 375px 的网站的媒体查询会在我的手机上出现，但同时完全可以查看始终为 600px 宽的表格？

• 这是屏幕像素密度的问题，还是稍微复杂一点？

• 这些元标记究竟扮演什么角色？

您能提供的任何见解将不胜感激。谢谢。

Answer 1

为什么我的媒体查询与运行 max-width:375px 的网站打到我的手机，但一个始终为 600px 宽的表格是 在同一时间完全可见？

因为您的手机可视端口实际上具有1136 像素的宽度和640 像素的高度。

这是屏幕像素密度的问题，还是稍微复杂一点？

这是屏幕像素密度的问题，默认像素比例取决于显示密度：

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)

对于 iPhone SE，它是 326 ppi（每英寸像素）。

这些元标记究竟扮演什么角色？

标签不是任何网络标准的一部分，它是由 Mobile Safari 引入的，width 属性控制视口的大小，device-width 它是一个特殊值，这是标签的典型用法：

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

将宽度设置为设备视口的宽度，缩放为 1，其在CSS pixels 中的宽度根本不考虑像素密度。使用 JavaScript 更改元标记的值是可行的，网站将对新值做出反应。 尝试将宽度设置为 375 像素，看看你的手机会发生什么。

查看这2篇文章：

• pixel its not a pixel
• 2 viewports