我正致力于制作主题移动响应。您可以在此处查看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。感谢大家。
答案 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
。您需要在索引页面中添加它。