为什么以像素为单位的 CSS 大小的 HTML 元素在 iOS 上显得稍大? [英] Why do HTML elements with CSS sizes measured in pixels appear slightly larger on iOS?

问题描述

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

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

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

如果我稍微调整一下链接的 CSS 属性 &无序列表填充，我可以让浅灰色背景在移动设备上完美排列，但在台式机/笔记本电脑设备上它是关闭的！

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

澄清编辑:我已将导航栏的测量单位切换为 em，但仍然存在相同的未对齐问题.我的理解是，在同一设备上，所有其他(浏览器缩放等)都相同，px(或 pt 等)具有固定长度.因此，为了便于论证，假设在特定桌面上 D 上 10px = 2cm，在特定移动设备上 M 上 10px = 1cm，其他条件相同.因此，从 M 到 D 存在 2 倍的真实世界缩放因子.现在，使用我为导航栏中的每个元素分配的一组固定 CSS 属性，选定链接"背景和每个列表项(博客等)(以及它们的所有填充)使用 D 完美对齐.因此，当 M 渲染导航栏时，它应该到达的导航栏比 D 渲染的导航栏小 2 倍.尽管 M 实际上更小，px 中导航栏的高度仍然等于列表项的高度及其相关的 px 内边距.相反，在渲染过程中的某个地方，M 决定导航栏的高度实际上只是稍微小于列表项及其相关填充的高度.我正在努力理解为什么会发生这种情况.换句话说，即使 px 在两个不同设备上的大小不同，以 px 衡量的两个数量之间的关系应该仍然是一样.

导航栏代码如下.

<div id="包装器"><div id="标题"><div id="导航菜单"><ul id="导航"><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>

使用以下 CSS 代码:

div#header {位置:固定；高度:60px；宽度:100%；边距:0 自动；背景:#57606A；不透明度:0.85；}ul#导航{字体大小:0；列表样式类型:无；文本对齐:左；边距:0；填充顶部:19px；}li.nav {字体大小:19px；font-family: "Helvetica", sans-serif;字体粗细:更轻；显示:内联；}a:link.nav {颜色:#dddddd；文字装饰:无；过渡:0.25s；填充:19px 12px；}/* 确保当前页面在导航中突出显示 */body#blog a#nav-blog,body#about a#nav-about,body#projects a#nav-projects,body#contact a#nav-contact {颜色:#aaccaa；背景:#798088；}

解决方案

看看

这样，我们说 ul 对其子项的高度是不可知的".ul 不关心它的高度应该是多少，或者子 li 元素是否垂直、水平等居中.相反，li 元素关心它们的内边距，这反过来又使它们看起来具有正确的高度、居中等.

作为旁注，您也可以考虑使用 em 或 rem，因为 em 会根据父元素单元大小计算单元大小，并且 rem 根据文档的全局 text-size 计算大小.

I am working on a website with a navigation bar using a simple unordered list. The CSS values for each of these HTML elements are measured in px. I have been using Inspect Element in Google Chrome to measure the upper padding of the ul tag that centres the list and the padding of the a tag so that the link is the same height as the navigation bar.

When I view the page on a laptop/desktop with a largish screen, everything looks good. The light grey "selected link" background lines up perfectly with the darker grey of the nav bar:

However when I view the same page on any mobile device (I've tested it on iPhone 6+, iPhone 5, & iPad 2) the padding of the selected link is slightly off:

If I slightly adjust the CSS attributes of the link & unordered list padding, I can make the light grey background line up perfectly on mobile devices, but then it is off on desktop/laptop devices!

I have done some research into how the px measurement works, and understand that it doesn't correspond to exactly one pixel onscreen, that instead it corresponds to some sort of "CSS pixel" that can change in size depending on browser zoom and pixel density and some other factors. This would make sense to me if the navigation bar appeared smaller in real terms on mobile devices, but the fact that the elements are actually changing position baffles me. If anyone has some clarifying information on what is going on here, and what I can do to make the menu bar elements line up properly on both desktop and mobile, I would greatly appreciate it.

CLARIFICATION EDIT: I have switched the unit of measure to em for the nav-bar and still have the same misalignment issue. My understanding is that on the same device, all else (browser zoom etc.) being equal, px (or pt etc.) has a fixed length. So for the sake of argument, let's say that 10px = 2cm on a particular desktop, D, and 10px = 1cm on a particular mobile device, M, all else being equal. So there exists a real-world scaling factor of 2x from M to D. Now, with the fixed set of CSS properties I have assigned to each element in the nav-bar, the "selected link" background and each list item (BLOG etc.) (and all their padding) perfectly line up using D. So when M renders the nav-bar it should arrive at a nav-bar that is 2x smaller than that rendered by D. Despite M being smaller in real terms, the height of the nav-bar in px is still equal to the height of the list items and their associated padding in px. What instead happens is that somewhere in the rendering process, M decides that the nav-bar's height is actually just slightly less than the height of the list items and their associated padding. I'm struggling to understand why this happens. In other words, even if the px is a different size on two different devices, the relation between two quantities measured in px should still be the same.

Code for the navigation bar is below.

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

With the following CSS code:

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

解决方案

Take a look at A pixel is not a pixel is not a pixel.

A cleaner solution to what you're trying to accomplish may be just to set padding on your li elements (see the jsfiddle):

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

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

.selected {
    background: #eee;
}

This way, we say the ul is "agnostic" about the height of its children. The ul doesn't care about what its height is supposed to be, or whether the child li elements are centered vertically, horizontally, etc. Instead, the li elements care about their padding, which in turn makes them appear to have the correct height, centering, etc.

As a side note, you can also consider using em or rem, as em calculates the unit size based on parent elements unit sizes, and rem calculates sizes based on the global text-size of the document.

这篇关于为什么以像素为单位的 CSS 大小的 HTML 元素在 iOS 上显得稍大?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！