Bootstrap3实用教程
2.1.2 移动设备优先
阅读(

Bootstrap基础

Bootstrap全局样式

概述

HTML5文档类型

移动设备优先

Bootstrap3最显著的变化,就是移动设备优先(Mobile First)。Bootstrap 2 中,为了让整个项目友好的支持移动设备,框架中的某些关键部分增加了专门针对移动设备的样式,还要手动引用另一个 CSS,这仅仅是权宜之计,而不是理想的解决方案。

Bootstrap3 重写了整个框架,使它全面支持移动设备,并始终贯彻移动设备优先的宗旨,将针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件或简单的针对移动设备增加一些可选的样式。

为了确保在移动设备浏览器上适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签:

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

上述代码的意思是,默认情况下,UI布局的宽度和移动设备的宽度一致。initial-scale=1确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。

在移动设备浏览器上,这样的设置并没有禁用缩放功能,用户依然可以通过缩放功能来缩放页面。如果你想禁用缩放功能,可以为视口(viewport)设置 meta 属性为 user-scalable=no 来禁用其缩放功能:

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

这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验