我设置了一个非常简单的网页，它在桌面浏览器上的工作方式符合我的预期，但在移动设备上却显示出奇怪的结果。这是代码:
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> 的文本大小与页面的其余部分相比，元素减少了。这是它的样子:
我不知道为什么会这样。通过开发工具查看它，似乎是 font-size前两个 <section>在移动设备上时元素会上升(我在 20px 中将其设置为 body，但实际上它们会更高:
).
我不明白的是为什么这也发生在<li>上元素？我可以用
<meta name="viewport" content="width=device-width, initial-scale=1">
但是该页面在手机上看起来很难看，这不是我想要的。我只希望页面上的文本大小相同。
好像display: inline-block是什么原因造成的，但找不到其他方法来对齐 <a>垂直元素仅使用 inline元素。
最佳答案
解决方案:
刚转
#container {
width: 900px;
}
进入
#container {
max-width: 900px;
}
同时申请
<meta name="viewport" content="width=device-width, initial-scale=1" />
在<head >-您的 html 部分。检查here ，我已经在我自己的服务器上设置了它(留在那里)供你引用。找到 css here .
这里发生了什么:
由于您的 #container确实有一个固定 width: 900px您的移动浏览器会自动缩小它以适应视口(viewport)宽度。由于浏览器以一种智能的方式执行此操作，因此它们会增加元素的字体大小以匹配元素的预期字体大小(这就是为什么您在计算样式中看到的字体大小比在样式表中的字体大小大得多)。
由于某些奇怪的原因，我无法解释浏览器似乎并未对所有元素执行此操作。
关于html - CSS 显示 :inline-block changes text size on mobile?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39550403/