元素在移动设备中显得更小
Ado*_*tep 2 html css mobile responsive-design responsiveness
我对这个问题很头疼，我不知道它是从哪里来的
基本上我正在制作这个网站，好吧，一切正常，直到您在移动设备上试用它，它非常小。我在其他网站上使用过相同的方法，但根本没有发生这种情况，我不必使用元或任何媒体查询，而且它仍然只是一个导航菜单。所以我将 ul 与 class row 和 li 与 col-sm-12 和 col-md-4 一起使用，因此它可以按预期工作。
这是电脑视图
那是手机视图
所有的尺寸都是 rem 和 em。itens 应该在移动时堆叠，它确实做到了，但它的一切都非常小
演示：https : //jsfiddle.net/nnhfqL2L/2/
body {
margin: 0;
padding: 0;
border: 0;
background-color: #666;
font-family: 'Roboto', Verdana, Tahoma, sans-serif;
}
/*Header*/
/*Nav*/
nav {
border-bottom: 4px solid #888;
}
nav ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
background-color: #fff;
text-align: center;
font-size: 1.5rem;
}
nav ul li {
display: inline-block;
}
nav ul li a,a:hover {
text-decoration: none;
color: #000;
}
nav ul li section {
padding: 0.8em;
}
nav ul li .menuStrap {
background-color: #000;
height: 3px;
margin: 0 auto;
width: 0;
transition: width 0.2s;
transition-timing-function: ease-out;
}
nav ul li a:hover .menuStrap {
width: 100%;
}
<header>
<nav>
<ul class="row">
<li class="col-sm-12 col-md-3">
<a href="#">
<section>Winpad ?</section>
<div class="menuStrap"></div>
</a>
</li>
<li class="col-sm-12 col-md-3">
<a href="#">
<section>Produtos</section>
<div class="menuStrap"></div>
</a>
</li>
<li class="col-sm-12 col-md-3">
<a href="#">
<section>Sobre</section>
<div class="menuStrap"></div>
</a>
</li>
<li class="col-sm-12 col-md-3">
<a href="#">
<section>Contato</section>
<div class="menuStrap"></div>
</a>
</li>
</ul>
</nav>
</header>
把这个放在<head>：
<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
顺便说一句，更好的做法是手动将浏览器窗口调整为所需的大小，您可以下载浏览器的扩展/插件以调整浏览器窗口的大小或显示当前窗口大小。