CSS display:inline-block 在移动设备上更改文本大小？答案

【问题标题】：CSS display:inline-block changes text size on mobile?CSS display:inline-block 在移动设备上更改文本大小？
【发布时间】：2017-11-09 21:21:05
【问题描述】：

我建立了一个非常简单的网页，它在桌面浏览器上的工作方式符合我的预期，但在移动设备上显示奇怪的结果。这是代码：

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

<!DOCTYPE html>
<html>
  <body>
    <div id="container">
      <section class="box">
        Hi ! My name is <strong>Name</strong>. You might also know me as <strong>User</strong>. Bla bla bla, this is some text here. But not too much.
      </section>
      <section class="box">
        My main interests are <strong>hobby 1</strong>, <strong>hobby 2</strong>.
      </section>
      <section class="box">
        Reach me easily on <a href="https://twitter.com/Protectator">Twitter</a> !
        <br>
        <br> You can also find me on
        <ul id="links">
          <li>
            <div class="name">Twitter</div>
            <div class="link"><a href="https://twitter.com/Protectator">@Username</a></div>
          </li>
          <li>
            <div class="name">Facebook</div>
            <div class="link"><a href="https://www.facebook.com">Username</a></div>
          </li>
          <li>
            <div class="name">Google+</div>
            <div class="link"><a href="https://plus.google.com">+Username</a></div>
          </li>
        </ul>
      </section>
    </div>
  </body>
</html>

在桌面浏览器中查看时，它可以完美运行并以我想要的方式显示内容：

但是，当我从移动设备查看页面时，<li> 元素的文本大小与页面的其余部分相比变小了。这是它的外观：

我不知道为什么会这样。通过开发工具查看，似乎前两个<section> 元素中的font-size 在移动设备上会上升（我在body 中将其设置为20px，但实际上它们会更高： )。

我不明白的是，为什么<li> 元素上没有发生这种情况也？我可以使用

<meta name="viewport" content="width=device-width, initial-scale=1">

但是页面在手机上看起来很难看，这不是我想要的。我只希望页面上的文本大小相同。

似乎display: inline-block 是造成这种情况的原因，但找不到其他方法来实现仅使用inline 元素垂直对齐<a> 元素。

【问题讨论】：

可能是 viewport 问题。尝试添加到<head> 部分：<meta name="viewport" content="width=device-width, initial-scale=1">
@Django 谢谢，但我只是尝试过，没有任何区别。
这是您正在测试的模拟器吗？
@MisterEpic 我正在使用 Chrome 的开发工具来模拟 iPhone 的分辨率，并且我还使用物理 Android 手机。我得到了相同的结果。
嗯...在黑暗中拍摄，但尝试改变 body 的 line-height，它需要一个单位：1.4em

标签： html css mobile

【解决方案1】：

解决方案：

转一下

#container {
  width: 900px;
}

进入

#container {
  max-width: 900px;
}

也适用

<meta name="viewport" content="width=device-width, initial-scale=1" />

在您的 html 的 <head>-部分中。检查here，我已经在我自己的服务器上设置了它（留在那里）供你参考。找到css here。

这里发生了什么：

由于您的#container 确实有一个固定 width: 900px，您的移动浏览器会自动将其缩小以适应视口宽度。由于浏览器以一种智能的方式执行此操作，它们确实会增加元素的字体大小以匹配元素的预期字体大小（这就是为什么您在计算样式中看到的字体大小比在样式表中大得多的原因）。

由于某种奇怪的原因，我无法解释浏览器似乎并未对所有元素都这样做。

【讨论】：

感谢您的解决方案和解释。仍然奇怪的是浏览器似乎忽略了一些具有这种缩放比例的元素。

【解决方案2】：

我在开发一个响应式应用程序时遇到了非常相似的问题，该应用程序的字体在平板电脑浏览器和桌面浏览器（此处为 Chrome）中看起来应该相同

所以，对我来说，解决方法是使用 flex 或 inline-block 进行显示

#container {
  display: flex; \* or display:inline-block *\
}

我不知道为什么它会起作用，但这很好用

【讨论】：