移动/桌面媒体查询无法在手机上使用

时间:2015-05-28 16:31:43

标签: html css media-queries

昨晚,我致力于让我的网站进行移动优化。当用户在小于684px的设备上时,它应显示移动导航div并隐藏侧边栏div。我已经测试了这个在我的计算机上工作(通过像手风琴一样收缩铬)。我还检查了https://www.google.com/webmasters/tools/mobile-friendly/?url=www.kisnardonline.com以查看我的状态,但它说我的网站不适合移动设备(我发现我的链接可能也是有效的/视口)。一旦我整体工作,我将使链接更加传播。谢谢你的帮助!

以下是我的代码(http://www.kisnardonline.com/wp-content/themes/mytheme/style.css):

#wrapper { 
    display: block;
    min-width: 684px;
    max-width: 1200px;
    width: 98%; 
    margin: 0px auto; }

@media screen and (max-width: 684px) {
    #wrapper {
        min-width: 0px;  /* show under 684px - mobile */
    }
}

#content { 
    width: 74%;
    float: right; }

@media screen and (max-width: 684px) {
    #content {
        width: 100%;  /* show under 684px - mobile */
    }
}

#mobilenav {
    display: none; 
    margin: 15px auto;
    padding: 10px 10px 10px 10px;
    border-radius:20px;
    border:3px solid #a1a1a1;
    background:#1C2939; }

@media screen and (max-width: 684px) {
    #mobilenav {
        display: block;  /* show under 684px - mobile */
    }
}

#sidebar {
    display: block;
    width: 23%;
    min-width: 170px;
    max-width: 210px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    float: left; }

@media screen and (max-width: 684px) {
    #sidebar {
        display: none; } /* hide under 684px - mobile */
}

这是我的桌面(大于684像素的视图): enter image description here

这是我的桌面(小于684像素的视图): enter image description here

这是我的移动视图(三星Galaxy S6): enter image description here enter image description here

1 个答案:

答案 0 :(得分:1)

对于自适应页面,您需要添加一个视口标记,告知设备如何显示内容:

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

对于您的其他问题,“请求桌面网站”将无法按照您设置的方式运行。如果您有2个独立的站点(一个用于移动站点,一个用于桌面站点),则可以使用该功能。例如,移动网站将为m.kisnardonline.com,并且文件与桌面网站不同。