发布于 2015-02-06 10:41:52 | 1040 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的Bootstrap v3教程,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


本文为大家讲解的是使用bootstrap开发的网站在手机浏览器下响应式不起作用的解决方法,感兴趣的同学参考下。

问题描述

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

解决方法

bootstrap官方以经在手册里说的很明白了

在 Bootstrap 2 中,我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中,我们重写了整个框架,使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。也就是说,Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 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 里调试比较好



相关阅读 :
bootstrap在移动浏览器下响应式不起作用的解决方法
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
Bootstrap 响应式实用工具
Bootstrap 响应式设计
bootstrap 使用modal加载kindeditor编辑器弹出层文本框不能输入的问题解决方法
Bootstrap下拉菜单的2级嵌套示例代码
Bootstrap 下拉菜单
Bootstrap 按钮下拉菜单
Bootstrap 下拉菜单(Dropdown)插件
Bootstrap 下拉菜单
15 个很棒的 Bootstrap UI 界面编辑器
20 款最棒的 jQuery Bootstrap 插件
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2015 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务