css - 移动端网站宽度发生变化

Question

您好，我的网站宽度在移动设备上无法正常显示，所以网站看起来太小了。正常的宽度应该是375，但变成了980。我不知道为什么？因为我只使用 materialize 而我的 SCSS 没有硬编码任何宽度。我没有任何开始的线索。希望得到一些帮助。谢谢。

    .brand-logo {
  margin: 0 10px 0 10px;
}

.YellowtailLogo {
    font-family: 'Yellowtail', cursive;
}
.brand-logo img{
    height: 28px;
    position: relative;
    margin-right: 10px;
    top: 3px;
}

.h1Landing {
    font-family: 'Yellowtail', cursive;
    color: #ee6e73;
}

.msg_page_container {
    height: 100%;
    position: fixed;
    width: 100%;
    overflow: hidden;
    left: 0px;
    padding: 0 10% 0 10%;

    .collection {
      overflow: scroll;
      height: 40%;
    }

    .msg_input_div{

    }
}

Answer 1

使用媒体查询将内容宽度更改为手机屏幕的宽度:

@media screen and(max-width:375px){
html,body{width:100%;
box-sizing:border-box;
}
}

并包含

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

在 CSS 中