Question

我已经设置了一个非常简单的网页，它按照我打算在桌面浏览器上运行的方式工作，但在移动设备上显示出奇怪的结果。这是代码：

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>

在dekstop浏览器中查看时，它完美无缺，并以我想要的方式显示内容：

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

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

我不明白的是，为什么这个也不会发生在<li>元素上？我可以用

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

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

display: inline-block似乎是导致此问题的原因，但无法找到另一种方法来仅使用<a>元素垂直对齐inline元素。

Answer 1

解决方案：

转身

#container {
  width: 900px;
}

成

#container {
  max-width: 900px;
}

并且也适用

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

在你的html的<head＆gt;部分中。检查here，我已将其设置在我自己的服务器上（留在那里）供您参考。找到css here。

这里发生了什么：

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

由于一些奇怪的原因，我无法解释浏览器似乎并没有为所有元素执行此操作。

Answer 2

我在开发响应式应用时面临非常类似的问题，其平板电脑浏览器和桌面浏览器的字体应该相同（此处为Chrome）

所以，对我来说固定的是使用flex或inline-block进行展示

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

我不确定它为什么会起作用，但效果很好

CSS显示：内联块在移动设备上更改文本大小？

2 个答案:

解决方案：

这里发生了什么：