移动设备上忽略的媒体查询

时间:2015-11-10 04:10:17

标签: html css css3 mobile wordpress-theming

我正致力于制作主题移动响应。您可以在此处查看http://107.170.168.111/

在桌面上查看并调整浏览器大小时,它可以正常工作。但是,在实际的移动设备上,它似乎没有正常工作(应该隐藏侧边栏并显示移动导航)。它适用于单个帖子视图,例如:http://107.170.168.111/2015/04/27/szechuan-green-beans/#more-9327

但不是实际索引。我似乎无法弄清楚 为什么

我的媒体查询当然是在我的CSS文档的末尾:

    @media screen and (max-width: 640px){
        .hide-for-small{
            display: none !important;
        }
        .show-for-small{
            display: block !important;
        }

        .sidebar-container{
        display: none !important;
        }
        #sidebar{
        display: none !important;
        }
        .wrapper{
        width: 100%;
        }
        #content{
        position: relative;
        display: block;
        margin: 0;
        width: 100%;
        padding: 110px 0 0;
        }
    }

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

我很难过,有什么建议吗?谢谢!

更新

meta viewport位于header.php中 - 它包含在index.php中,但由于某种原因未显示。在single.php上使用相同的代码。

解决:

禁用的缓存插件仍在提供不包含meta viewport的旧版index.php。感谢大家。

2 个答案:

答案 0 :(得分:3)

将@media从“screen”更改为“all”。您的目标是所有设备不仅仅是屏幕:

 @media all and (max-width: 640px){
 // your css
}

修改

当您查看源代码时,您无法找到“viewport”的任何meta标记。我使用你的代码并在我的编辑器中添加了视口,它运行得很好:

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

答案 1 :(得分:1)

问题:索引页面没有meta viewport。您需要在索引页面中添加它。