CSS @media(min-width) 不适用于 phone

Question

我目前正在制作一个菜单侧边栏，当屏幕宽度超过 568px（大到足以同时显示内容和菜单）时应该始终打开，但当屏幕宽度低于 568px 时可以打开和关闭那个宽度。

代码：

@media(min-width:568px){
  .open-slide {display:none}
  .btn-close {display:none}
  .side-nav {width:250px;margin-top:80px;}
}

.open-slide = 打开侧边栏的按钮
.btn-close = 关闭侧边栏的按钮（很明显）
.side-nav{width:250px;margin-top:80px;} 更改侧边栏的标准宽度，使其可见，并将其边框向下移动一点，因为 "close" 按钮不再存在。

当我用我的浏览器测试它时，一切正常。但是当我用我的 phone 测试它时，侧边栏就在那里，就好像屏幕和完整的电脑屏幕一样大。那里有什么问题？

长话短说：
该代码适用于我的电脑，但不适用于我的 phone，为什么？

Answer 1

可能您缺少 HTML header 中的视口：

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

CSS @media(min-width) doesnt work on phone