css - 媒体查询在浏览器中响应但不是移动

Question

我有这个媒体查询，里面有一些 CSS，查询在我使用过类似 CSS 的其他网站上工作正常，当我调整浏览器大小时，我得到了想要的效果。但是当我在 iPad 或 android 上看时，我看不到任何效果，这是因为媒体查询不存在

@media only screen and (max-width: 767px) {
.menu-button{
display: block;
height: 42px;
background-image: url(/sites/all/themes/dream/images/menu-icon.png);
background-repeat: no-repeat,repeat-x;
background-position: 98% 50%,0 0;
text-align: right;
font-weight: 700;
font-family: 'SweetSans';
text-transform: uppercase;
color: #333333;
line-height: 42px;
cursor: pointer;
padding-right: 36px;
font-size: 13px;
margin-right: 106px;
}




.menu-button {
    display: block;
    height: 34px;
    background-image: url(/sites/all/themes/dream/images/menu-icon.png);
    background-repeat: no-repeat, repeat-x;
    background-position: 98% 50%, 0 0;
    text-align: right;
    font-weight: 700;
    font-family: 'SweetSans';
    text-transform: uppercase;
    color: #333333;
    line-height: 42px;
    cursor: pointer;
    padding-right: 36px;
    font-size: 13px;
}


#main {
  width: 100%;
}

#block-menu-primary-links ul.menu li {

  float: none;
  padding: 0px 0px;
  width: 100%;
  display: none;
  float: left;

  background-color: rgb(172, 173, 184);

}

#main li {
  float: none;
  list-style-type: none;
  font-weight: 400;
}

#main li.first a {
    border-left: 0px;
}

#main li a {
    width: 100%;
}

#main li ul, #main li ul li, #main li ul li a {
    position: relative;
    float: none;
    width: 100%;
}
}

Answer 1

您必须添加 veiwport标记到您的 HTML(在 head 中):

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