Question

我有一个基于Bootstrap ver2 css框架的响应式WP主题。一切都在桌面上工作：如果测试不同大小（针对不同的媒体查询）没问题。但如果我在手机上测试不加载媒体查询。可能是什么问题。

链接到网站：http://moldovan.szanto-zoltan.com/

p.s。：标题包含此内容以适合设备宽度

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

Answer 1

通过Bootstrap 2的文档

此时默认情况下，Bootstrap不包含响应功能因为并非一切都需要响应。而不是鼓励开发人员要删除此功能，我们认为最好将其启用需要的。

如何启用响应功能

通过添加适当的元数据来启用项目中的响应式CSS 您文档的 <head> 中的标记和其他样式表。如果你已经从Customize页面编译了Bootstrap，你只需要包含元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

如果您没有从Customize页面编译Bootstrap，请按照以下步骤操作

使用已编译的响应版本bootstrap-responsive.css
添加@import“responsive.less”并重新编译Bootstrap
修改并重新编译responsive.less作为单独的文件

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

有关详细信息，请阅读documentation。我希望这个解决方案可以帮到你。

建议

我认为最好的解决方案是使用bootstrap 3它会正常工作

在标题页中添加这些元，以告知浏览器禁用缩放。然后CSS @media选择器按预期工作：

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">

来自question

Bootstrap响应2不会在移动设备上加载

1 个答案:

通过Bootstrap 2的文档

如何启用响应功能

如果您没有从Customize页面编译Bootstrap，请按照以下步骤操作

建议