为什么以像素为单位的 CSS 大小的 HTML 元素在 iOS 上显得稍大一些？答案

【问题标题】：Why do HTML elements with CSS sizes measured in pixels appear slightly larger on iOS?为什么以像素为单位的 CSS 大小的 HTML 元素在 iOS 上显得稍大一些？
【发布时间】：2015-08-24 00:51:21
【问题描述】：

我正在使用一个简单的无序列表在一个带有导航栏的网站上工作。每个 HTML 元素的 CSS 值以 px 为单位。我一直在 Google Chrome 中使用 Inspect Element 来测量 ul 标记的上部填充，该标记使列表居中，以及 a 标记的填充使链接与导航栏的高度相同。

当我在屏幕较大的笔记本电脑/台式机上查看该页面时，一切看起来都不错。浅灰色的“选定链接”背景与导航栏的深灰色完美对齐：

但是，当我在任何移动设备上查看同一页面时（我已经在 iPhone 6+、iPhone 5 和 iPad 2 上进行了测试），所选链接的填充有点偏离：

如果我稍微调整链接和无序列表填充的 CSS 属性，我可以使浅灰色背景在移动设备上完美对齐，但在台式机/笔记本电脑设备上就关闭了！

我对 px 测量的工作原理进行了一些研究，并了解它并不完全对应于屏幕上的一个像素，而是对应于某种“CSS 像素”，该像素可以根据浏览器缩放而改变大小和像素密度和其他一些因素。如果导航栏在移动设备上实际显示更小，这对我来说是有意义的，但元素实际上在改变位置的事实让我感到困惑。如果有人对这里发生的事情有一些澄清信息，以及我可以做些什么来使菜单栏元素在桌面和移动设备上正确排列，我将不胜感激。

澄清编辑：我已将导航栏的度量单位切换为 em，但仍然存在相同的错位问题。我的理解是，在同一设备上，其他所有条件（浏览器缩放等）都相同，px（或 pt 等）具有固定长度。因此，为了便于讨论，假设 10px = 2cm 在特定桌面上，D，而 10px = 1cm 在特定移动设备上，M，其他条件相同.因此，从 M 到 D 存在 2 倍的真实比例因子。现在，使用我为导航栏中的每个元素分配的固定 CSS 属性集，“选定链接”背景和每个列表项（博客等）（以及所有它们的填充）使用 D 完美对齐。因此，当 M 渲染导航栏时，它应该到达比 D 渲染的导航栏小 2 倍的导航栏。尽管 M 实际上更小，但导航栏的高度（以 px 为单位）仍等于列表项的高度及其相关的以 px 为单位的填充。相反，在渲染过程中的某处，M 决定导航栏的高度实际上略小于列表项的高度及其关联的填充。我很难理解为什么会发生这种情况。换句话说，即使 px 在两个不同的设备上是不同的尺寸，在 px 中测量的两个量之间的 relation 应该仍然是一样。

导航栏的代码如下。

<body id="blog">
    <div id="wrapper">
      <div id="header">
        <div id="nav-menu">
          <ul id="nav">
            <li class="nav"><a id="nav-blog" href="/blog" class="nav">BLOG</a></li>
            <li class="nav"><a id="nav-projects" href="/projects" class="nav">PROJECTS</a></li>
            <li class="nav"><a id="nav-about" href="/about" class="nav">ABOUT</a></li>
            <li class="nav"><a id="nav-contact" href="/contact" class="nav">CONTACT</a></li>
            <li class="nav"><a href="/rss" class="nav">RSS</a></li>
          </ul>
        </div>

使用以下 CSS 代码：

div#header {
  position: fixed;
  height: 60px;
  width: 100%;
  margin: 0 auto;
  background: #57606A;
  opacity: 0.85;
}

ul#nav {
  font-size: 0;
  list-style-type: none;
  text-align: left;
  margin: 0;
  padding-top: 19px;
}

li.nav {
  font-size: 19px;
  font-family: "Helvetica", sans-serif;
  font-weight: lighter;
  display: inline;
}

a:link.nav {
  color: #dddddd;
  text-decoration: none;
  transition: 0.25s;
  padding: 19px 12px;
}

/* Ensures that the current page is highlighted in nav */
body#blog a#nav-blog,
body#about a#nav-about,
body#projects a#nav-projects,
body#contact a#nav-contact {
  color: #aaccaa;
  background: #798088;
}

【问题讨论】：

标签： html css navigationbar

【解决方案1】：

看看A pixel is not a pixel is not a pixel。

一个更简洁的解决方案可能只是为您的li 元素设置填充（请参阅jsfiddle）：

ul {
    background: gray;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    padding: 10px; /* the relevant part */
}

.selected {
    background: #eee;
}

这样，我们说ul 对其子项的身高“不可知”。 ul 不关心它的高度应该是多少，或者子 li 元素是否垂直居中、水平居中等。相反，li 元素关心它们的填充，这反过来使它们似乎具有正确的高度、居中等。

作为旁注，您还可以考虑使用em 或rem，因为em 根据父元素单元大小计算单元大小，而rem 根据全局text-size 计算大小文件。

【讨论】：

为ul#nav 提供背景颜色而不是将所有内容都放在 div 中是个好主意。我这样做并更改了我的测量值以使用 em 而不是 px。（我首先使用 px 的原因是我可以将 font-size: 0 设置为 ul#nav 删除内联 li 元素之间的小填充（边距？），然后将li 元素设置为固定值，这样它们就不会继承font-size: 0 值）。但即使将测量值更改为 em，问题仍然存在，链接突出显示仅在移动设备或桌面设备上排列，而不是两者。
@JordanSchalm，没有问题。是的，我的建议的重点与声明背景颜色的位置无关，而是您可以简单地在 li 元素上设置适当的填充来解决垂直对齐问题。

【解决方案2】：

因为电脑和 iOS 设备的屏幕尺寸不同。

iOS 设备的屏幕比电脑小很多，但是无论屏幕有多大，你都硬编码了文本的像素大小。

为了实现跨设备和跨浏览器的兼容性，最好的办法是使用em 单位，它是相对于屏幕尺寸的单位。因此，将px 更改为em 并相应地更改数字，em 将缩小到其在 iOS 设备上的相对大小。

【讨论】：

我的问题不是 iPhone 上的导航栏太大，而是选定的链接背景突出显示（图中的博客）与移动或桌面上的导航栏完全对齐，但从不两者兼而有之。导航栏的各个元素似乎以不同的速度缩小（因此错位），这是我难以理解的部分。如果导航栏作为一个整体简单地按比例缩小，它仍然会对齐。当比较同一页面和设备上的两个元素时，px 应该是一个固定的度量单位，其他条件都相同。
@JordanSchalm 对不起，我看你的问题太快了，回答也太快了，我没有完全理解这个问题......
正如提问者在回复中所说，使用 ems 并不能解决这个问题。使用 ems、rems 还是 px 是一个不同的话题，不能说一个是正确的，另一个是错误的，因为每种方法都有优点和缺点。