移动设备（手机/平板电脑）和带有CSS媒体查询的Bootstrap

Question

移动设备（手机和平板电脑）上的Bootsrap和CSS媒体查询存在很大问题。基本我使用默认的Boostrap网格和一些CSS媒体查询来调整一些东西（比如隐藏/显示Bootsrap的移动菜单）。

基于桌面浏览器（Chrome和FireFox），一切正常，布局响应迅速。在这种情况下，我使用了col-sm-类，但在移动设备上它没有工作（使用Nexus 7和LG3测试）所以我决定看看col-md-和那个网格是否工作正常但是不应该在横向模式下影响Nexus 7。

在Bootsrap网格出现问题后，我遇到常见的CSS媒体查询问题，如@media screen and (max-width: 768px) {} - 在Nexus7或LG3上没有触发（至少应在纵向模式下触发）。

在此处查看所有这些问题的网站：http://bgcnj.org/

有什么想法发生了什么？

Answer 1

在标题中添加：

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

这将允许您应用特定于移动设备的CSS。