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

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

例如，在你的头脑中：

$scope.pageChanged = function(newPage) {
   // get orders for newPage number
   $http.get(...).then(function(response) {
       // orders for newPage number fill the same 'orders' array
       this.orders = response.data
   });
}

Answer 2

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

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

响应式CSS不适用于智能手机

2 个答案: