元素在移动端显得更小

Question

我很头疼这个问题，我不知道它是从哪里来的

基本上我正在制作这个网站，好的，一切正常，直到您在移动设备上尝试它，它非常小。我在其他网站上使用相同的方法工作，这根本没有发生，我不必使用元数据或任何媒体查询，它仍然只是一个导航菜单。所以我将 ul 与 class 行一起使用，将 li 与 col-sm-12 和 col-md-4 一起使用，因此它可以按预期工作。

这是电脑视图

这是移动视图

所有尺寸均以 rem 和 em 为单位。这些物件应该在移动时堆叠起来，确实如此，但它的一切都非常小

演示： 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>

Answer 1

那是视口问题：将您的视口元标记更改为：

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimum-scale=1"/>

Answer 2

把这个放在 <head>:

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

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

顺便说一下，最好手动将浏览器 window 调整到想要的大小，您可以下载 extensions/plugins 浏览器来调整浏览器 window 或显示当前大小window尺寸。

Answer 3

在 <head> 部分试试这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />

或者在媒体查询中，您可以为小分辨率使用不同的字体大小..

@media(min-width:480px){html{font-size: 90%}}

元素在移动端显得更小

Elements appear smaller in mobile

html

css

mobile

responsive-design

responsiveness