CSS display:inline-block是否会改变移动设备上的文字大小？

Question

CSS display:inline-block是否会改变移动设备上的文字大小？

9

我设置了一个非常简单的网页，桌面浏览器上的效果与我的意图相符，但在移动设备上却显示出奇怪的结果。以下是代码：

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 会随着移动设备而增加（我已将其设置为20px，但实际上会高得多）：

我不理解的是，为什么<li>元素也不会受到影响？我可以使用

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

但是在手机上页面会显得很丑，这不是我想要的。我只想让页面上的文本大小相同。似乎是"display: inline-block"导致了这个问题，但是找不到其他方法来实现只使用"inline"元素垂直对齐"a"元素。

- Kewin Dousse

3

可能是视口问题。尝试在 <head> 部分添加：<meta name="viewport" content="width=device-width, initial-scale=1">。 - Django

@Django 谢谢你，但是我刚刚尝试了一下，没有任何改变。 - Kewin Dousse

你正在测试模拟器吗？ - Mister Epic

嗯...瞎猜一下，但尝试在body上更改行高，它需要一个单位：1.4em。 - Mister Epic

为了确认一下，你的真实代码确实有一个<head>元素吗？ - connexo

显示剩余3条评论

2个回答

1

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

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

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

我不确定为什么它有效，但这很棒。

- madhu131313

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- connexo · Accepted Answer

解决方案：

只需转动

#container {
  width: 900px;
}

#container {
  max-width: 900px;
}

并且也应用

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

在你的 HTML 的 <head> 部分中。请查看这里，我已经将它设置在我的服务器上（保留在那里）供您参考。在这里找到 CSS。

发生了什么：

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

由于某种奇怪的原因，我无法解释为什么浏览器似乎并不对所有元素都执行此操作。