Question

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

第一个是在出现在手机屏幕上的html电子邮件和网站之间的变化。更具体地说，在开发网站时，我可以使用低于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"/>

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

总之，我的主要问题如下：

为什么我的媒体查询运行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（每英寸像素数）。

这些元标记到底扮演什么角色？

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

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

将宽度设置为设备视口的宽度，缩放设置为1，宽度设置为CSS pixels，它根本不考虑像素密度。使用JavaScript更改元标记的值，网站将对新值做出反应。尝试将宽度设置为375像素，以查看手机中发生的情况。

检查这两篇文章：

了解用于Web开发的屏幕大小/像素密度（网站和电子邮件）

1 个答案: