为什么 HTML 具有 CSS 大小（以像素为单位）的元素在 iOS 上显得稍大？

Question

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

当我在 laptop/desktop 的大屏幕上查看页面时，一切看起来都很好。浅灰色 "selected link" 背景与导航栏的深灰色完美对齐：

然而，当我在任何移动设备上查看同一页面时（我已经在 iPhone 6+、iPhone 5 和 iPad 2 上测试过）所选 link 略有偏差：

如果我稍微调整 link 和无序列表填充的 CSS 属性，我可以使浅灰色背景在移动设备上完美对齐，但在 desktop/laptop 台设备！

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

澄清编辑： 我已将导航栏的度量单位切换为 em，但仍然存在相同的错位问题。我的理解是，在同一台设备上，所有其他（浏览器缩放等）都相同，px（或 pt 等）有一个固定的长度。因此，为了便于争论，假设在特定桌面上 10px = 2cm D，在特定移动设备上 10px = 1cm M，所有其他条件相同。因此，从 M 到 D 存在一个 2 倍的真实比例因子。现在，通过我分配给导航栏中每个元素的固定 CSS 属性集，"selected link" 背景和每个列表项（BLOG 等）（及其所有填充）完美对齐使用 D。因此，当 M 呈现导航栏时，它应该到达比 D 呈现的导航栏小 2 倍的导航栏。尽管 M 实际上更小，但 px 中导航栏的高度仍然等于列表项及其相关联的高度填充 px。取而代之的是，在渲染过程中的某个地方，M 决定导航栏的高度实际上略微小于列表的高度项目及其相关的填充。我很难理解为什么会这样。换句话说，即使 px 在两个不同的设备上大小不同，relation 两个量之间的 px 应该还是一样。

导航栏的代码如下。

<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;
}

Answer 1

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

iOS 设备的屏幕比计算机上的屏幕小得多，但是无论屏幕尺寸有多大，您都对文本的像素大小进行了硬编码。

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

Answer 2

看看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 是其子项的身高 "agnostic"。 ul 不关心它的高度应该是多少，或者子 li 元素是否垂直居中、水平居中等。相反，li 元素关心它们的填充，这反过来又使它们看起来具有正确的高度、居中等。

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

为什么 HTML 具有 CSS 大小（以像素为单位）的元素在 iOS 上显得稍大？

Why do HTML elements with CSS sizes measured in pixels appear slightly larger on iOS?

html

css

navigationbar