title: Text vertical alignment issue in android and ios
body: <p>I've made a site where all texts are for some pixels up in android tablet and mobile compared with desktop.</p>
  
  <p>Would like to copy a small example. </p>
  
  <p>Here's my html code:</p>
  
  <pre><code>&lt;body&gt;
        &lt;h3&gt;MAKING OF&lt;/h3&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here's the css code:</p>
  
  <pre><code>body {
      text-align: center;
      padding-top: 50px;
  }
  html {
      font-size: 62.5%;
  }
  @font-face {
      font-family: MPL;
      src: local("MPL"),
      url(fonts/MPL.ttf),
      url(fonts/MPL.eot);
  }
  h3 {
      font-family: MPL;
      font-size: 30px;
      font-size: 3rem;
      height: 60px;
      line-height: 60px;
      padding: 0px 12px;
      background-color: #5496F2;
      color: #000;
  }
  </code></pre>
  
  <p>May anyone know the reason why the text is not properly aligned on tablet. </p>
  
  <p>Here's the screenshot of the right alignment on desktop browser
  <img src="https://i.stack.imgur.com/oXbcX.png" alt="enter image description here"></p>
  
  <p>And here's the screenshot of the issue on tablet browser
  <img src="https://i.stack.imgur.com/ztAUu.png" alt="enter image description here"></p>
  
  <p>On desktop this is working properly both in FF and Chrome, but on android tablet it's wrong aligned as on Chrome as on FF browsers, also it's not properly working on ios Safari browser. Here's the link: </p>
  
  <p><a href="http://inants.com/kadmos/web/kad/a/a" rel="noreferrer">http://inants.com/kadmos/web/kad/a/a</a></p>
  
  <p>Hope someone will help to understand this issue and will suggest the best solution.</p>
  
  <p>Thanks.</p>