title: CSS display:inline-block changes text size on mobile?
body: <p>I have set up a very simple webpage which works the way I intend on a desktop browser, but shows strange results on mobile. Here is the code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: "Raleway", "Tahoma", "Helvetica", "Arial", Sans-serif;
    line-height: 1.4;
    color: #303030;
    font-size: 20px;
  }
  
  a,
  a:visited {
    color: blue;
    text-decoration: none;
  }
  
  a:hover {
    color: red;
  }
  
  #container {
    width: 900px;
    margin: 30px auto 0px auto;
  }
  
  #links .name {
    display: inline-block;
    font-size: inherit;
    width: 90px;
  }
  
  #links .link {
    display: inline-block;
    font-size: inherit;
  }
  
  .box {
    background-color: rgba(255, 255, 255, 1);
    padding: 20px 20px;
    margin: 20px 0px;
    box-shadow: 0 1px 1px #D0D0D0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;body&gt;
      &lt;div id="container"&gt;
        &lt;section class="box"&gt;
          Hi ! My name is &lt;strong&gt;Name&lt;/strong&gt;. You might also know me as &lt;strong&gt;User&lt;/strong&gt;. Bla bla bla, this is some text here. But not too much.
        &lt;/section&gt;
        &lt;section class="box"&gt;
          My main interests are &lt;strong&gt;hobby 1&lt;/strong&gt;, &lt;strong&gt;hobby 2&lt;/strong&gt;.
        &lt;/section&gt;
        &lt;section class="box"&gt;
          Reach me easily on &lt;a href="https://twitter.com/Protectator"&gt;Twitter&lt;/a&gt; !
          &lt;br&gt;
          &lt;br&gt; You can also find me on
          &lt;ul id="links"&gt;
            &lt;li&gt;
              &lt;div class="name"&gt;Twitter&lt;/div&gt;
              &lt;div class="link"&gt;&lt;a href="https://twitter.com/Protectator"&gt;@Username&lt;/a&gt;&lt;/div&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;div class="name"&gt;Facebook&lt;/div&gt;
              &lt;div class="link"&gt;&lt;a href="https://www.facebook.com"&gt;Username&lt;/a&gt;&lt;/div&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;div class="name"&gt;Google+&lt;/div&gt;
              &lt;div class="link"&gt;&lt;a href="https://plus.google.com"&gt;+Username&lt;/a&gt;&lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/section&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works perfectly and displays things the way I want when viewed in a dekstop browser :
  <a href="https://i.stack.imgur.com/afumE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/afumE.png" alt="enter image description here"></a></p>
  
  <p>However, when I view the page from a mobile device, the size of the text of <code>&lt;li&gt;</code> elements get reduced compared to the rest of the page. Here is how it looks :</p>
  
  <p><a href="https://i.stack.imgur.com/4Hh7a.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4Hh7a.png" alt="enter image description here"></a></p>
  
  <p>I have no idea why this happens. Looking at it through the dev tools, it seems like the <code>font-size</code> of the first two <code>&lt;section&gt;</code> elements goes up when on mobile (I've set it to <code>20px</code> in <code>body</code>, but they go way higher in reality :
  <a href="https://i.stack.imgur.com/2rH7G.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2rH7G.png" alt="enter image description here"></a>).</p>
  
  <p>The thing I don't understand is then why doesn't this <strong>also</strong> happen on the <code>&lt;li&gt;</code> elements ? I could use</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  </code></pre>
  
  <p>but then the page would look ugly on phone, which is not what I'm looking for. I just want the text to be the same size on the page.</p>
  
  <p>It seems like the <code>display: inline-block</code> is what causes this, but can't find an other way to achieve aligning the <code>&lt;a&gt;</code> elements vertically only using <code>inline</code> elements.</p>