title: Why do HTML elements with CSS sizes measured in pixels appear slightly larger on iOS?
body: <p>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 <strong>Inspect Element</strong> in Google Chrome to measure the upper padding of the <strong>ul</strong> tag that centres the list and the padding of the <strong>a</strong> tag so that the link is the same height as the navigation bar. </p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/UJ7Gs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UJ7Gs.png" alt="Nav bar on laptop/desktop"></a></p>
  
  <p>However when I view the same page on any mobile device (I've tested it on iPhone 6+, iPhone 5, &amp; iPad 2) the padding of the selected link is slightly off:</p>
  
  <p><a href="https://i.stack.imgur.com/li5zn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/li5zn.png" alt="Nav bar on iPhone"></a></p>
  
  <p>If I slightly adjust the CSS attributes of the link &amp; 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!</p>
  
  <p>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 <em>smaller</em> 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.</p>
  
  <p><strong>CLARIFICATION EDIT:</strong> I have switched the unit of measure to <strong>em</strong> 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, <strong>px</strong> (or <strong>pt</strong> etc.) has a fixed length. So for the sake of argument, let's say that 10px = 2cm on a particular desktop, <strong>D</strong>, and 10px = 1cm on a particular mobile device, <strong>M</strong>, all else being equal. So there exists a real-world scaling factor of 2x from <strong>M</strong> to <strong>D</strong>. 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 <strong>D</strong>. So when <strong>M</strong> renders the nav-bar it <em>should</em> arrive at a nav-bar that is 2x smaller than that rendered by <strong>D</strong>. Despite <strong>M</strong> being smaller in real terms, the height of the nav-bar in <strong>px</strong> is still equal to the height of the list items and their associated padding in <strong>px</strong>. What instead happens is that somewhere in the rendering process, <strong>M</strong> decides that the nav-bar's height is actually <em>just slightly</em> 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 <strong>px</strong> is a different size on two different devices, the <em>relation</em> between two quantities measured in <strong>px</strong> should still be the same.</p>
  
  <p>Code for the navigation bar is below.</p>
  
  <pre><code>&lt;body id="blog"&gt;
      &lt;div id="wrapper"&gt;
        &lt;div id="header"&gt;
          &lt;div id="nav-menu"&gt;
            &lt;ul id="nav"&gt;
              &lt;li class="nav"&gt;&lt;a id="nav-blog" href="/blog" class="nav"&gt;BLOG&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav"&gt;&lt;a id="nav-projects" href="/projects" class="nav"&gt;PROJECTS&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav"&gt;&lt;a id="nav-about" href="/about" class="nav"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav"&gt;&lt;a id="nav-contact" href="/contact" class="nav"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav"&gt;&lt;a href="/rss" class="nav"&gt;RSS&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>With the following CSS code:</p>
  
  <pre><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;
  }
  </code></pre>