CSS显示:内联块在移动设备上更改文本大小？
我已经建立了一个非常简单的网页,它按照我打算在桌面浏览器上运行的方式工作,但在移动设备上显示出奇怪的结果.这是代码:
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元素垂直对齐元素.
解:
转身
#container {
width: 900px;
}
成
#container {
max-width: 900px;
}
并且也适用
<meta name="viewport" content="width=device-width, initial-scale=1" />
在<head你的HTML 的>部分.点击此处,我已将其设置在我自己的服务器上(留在那里)供您参考.在这里找到CSS.
这里发生了什么:
由于您#container确实修复 width: 900px了移动浏览器,因此会自动将其向下缩放以适合视口宽度.由于浏览器以智能方式执行此操作,因此它们确实增加了元素的字体大小以匹配元素的预期字体大小(这就是为什么您在计算样式中看到比样式表中更大的字体大小).
出于某些奇怪的原因,我无法解释浏览器似乎并没有为所有元素执行此操作.
