Bootstrap在移动端响应式不起作用的解决方法

PetitQ Other/其他 2019-5-19 2.18K 0 1

Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包。它由 Twitter 的设计师 MarkOtto 和 JacobThornton 合作开发，是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目，包括 NASA 的 MSNBC（微软全国广播公司）的 BreakingNews 都使用了该项目。本文为大家讲解的是使用 bootstrap 开发的网站在手机浏览器下响应式不起作用的解决方法，感兴趣的同学参考下。

问题描述

使用 bootstrap 开发的模板，但在手机移动浏览器上比如 chrome,firefox 下不自动响应式的缩放。

也想出现在这里？联系我们吧

解决方法

bootstrap 官方以经在手册里说的很明白了，在 Bootstrap2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在之中添加 viewport 元数据标签。

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

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

另外用 bootstrap 开发的前端模板在 uc 浏览器下兼容不好,是因为 UC 手机浏览器默认会开启他们引以为傲的【极速模式（2B 模式）】，原本在 Safari、Chrome 里显示正常的网页，在他那里产生一系列问题。如果关闭他的极速模式，就会恢复正常（掩耳盗铃）调试响应式浏览器还是在 safari 和 chrome 里调试比较好.