自適應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" />