自适应CSS在智能手机上不起作用

Question

我正在写一个asp.net响应页面。

我正在使用此CSS结构：

.customNavbar {
    display: none;
    margin-bottom: 0;
}

.navMenu {
    display: none;
}

 .divTopTicket {
    display: none;
}

    /**** OTHER THINGS FOR DESKTOP LAYOUT *****/


@media (max-width: 600px) {

    /**** LAYOUT FOR SMALLER SCREEN *****/

}

其实我有这种情况：

我在桌面上使用浏览器打开页面，并获得正确的桌面布局。 然后，我尝试手动减小浏览器窗口的尺寸，并以600px的分辨率获得正确的响应式布局。

在此之后，我尝试使用智能手机打开页面，并且遇到了以下问题：

该页面像具有正常布局的桌面浏览器一样打开，我真的不明白为什么。 我认为CSS是正确的。

有人可以帮我吗？

Answer 1

您需要使用视口标签： https : //developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

否则，您的手机将把网站视为桌面网站。

例如，在您的头上：

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

Answer 2

您也应该使用此meta标签，并且不要忘记在CSS文件中使用@media only屏幕和（min-width：）。 ：767px是平板电脑和移动设备的理想宽度。

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