具有 CSS 媒体查询的移动设备 (phone/tablet) 和 Bootstrap
Mobile devices (phone/tablet) and Bootstrap with CSS media queries
我在移动设备（phone 和平板电脑）上使用 Bootsrap 和 CSS 媒体查询时遇到了很大的问题。基本我使用默认的 Boostrap 网格和一些 CSS 媒体查询来调整一些东西（比如 hide/show 来自 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/
有什么线索吗？
将此添加到您的 header 中：
<meta name="viewport" content="width=device-width, initial-scale=1">
这将使您的 mobile-specific CSS 得到应用。
我在移动设备（phone 和平板电脑）上使用 Bootsrap 和 CSS 媒体查询时遇到了很大的问题。基本我使用默认的 Boostrap 网格和一些 CSS 媒体查询来调整一些东西（比如 hide/show 来自 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/
有什么线索吗？
将此添加到您的 header 中：
<meta name="viewport" content="width=device-width, initial-scale=1">
这将使您的 mobile-specific CSS 得到应用。