Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备。这实际上是一个非常及时的转变,因为现在越来越多的用户使用移动设备。

为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:

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

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。

在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。

通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

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

移动设备优先viewport的更多相关文章

  1. Bootstrap 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。

    http://v3.bootcss.com/ 从2.x升级到3.0版本 Bootstrap 3并不向后兼容Bootstrap v2.x.下面章节列出的内容可以作为从v2.x升级到v3.0的通用指南.如 ...

  2. Bootstrap工具包--用于响应式布局和移动设备优先的web项目

    Bootstrap是用于前端开发的工具包,是一个css/html框架 用于响应式布局和移动设备优先的web项目 响应式布局--一个网站能兼容多个终端 有很多版本:v3,v4,v5   三个没啥区别  ...

  3. CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

    1.PX(CSS pixels) 1.1 定义 虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. 1.2 注意 在CS ...

  4. 【viewport】移动设备的兼容性问题

    前段时间用微信开发者工具重构一个菜单项目的时候发现iphoneSE显示不全以及布局错乱的问题,找到了一个简单粗暴的解决方法.     移动设备上的viewport分为layout viewport  ...

  5. 针对移动设备的CSS3布局

    针对移动设备的CSS3布局 一些专业人士预测五年内移动设备将击败普通电脑成为网页浏览领域的霸主,不管这个预言是否应验,让网页在移动设备上较好的显示已经成为网页设计师和开发者的重要任务,本教程学习用CS ...

  6. meta viewport相关

    <!DOCTYPE html> H5标准声明,使用 HTML5 doctype,不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta c ...

  7. 移动WEB viewport 相关知识

    了解移动web viewport的知识,主要是为了切图时心中有数.本文主要围绕一个问题:切图时怎样设置<meta name="viewport">相关参数?围绕这个问题 ...

  8. 移动端开发viewport深入理解(转)

    一.viewport的概念   移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,就是浏览器上用来显示网页的那部分区域,但viewport不局限于浏览器可视区域 的大小,它 ...

  9. 移动前端开发之viewport的深入理解

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

随机推荐

  1. 10686 DeathGod不知道的事情

    Description 蚂蚁是很强大的动物,除了DeathGod知道的事情外还有很多不知道的!例如… 根据某种理论,时间方向上有无数个平行世界,有的世界蚂蚁很多,有的世界蚂蚁很少,有的世界蚂蚁会繁殖, ...

  2. HashMap两种遍历数据的方式

    HashMap的遍历有两种方式,一种是entrySet的方式,另外一种是keySet的方式. 第一种利用entrySet的方式: Map map = new HashMap(); Iterator i ...

  3. Codeforces Round #294 (Div. 2)

    水 A. A and B and Chess /* 水题 */ #include <cstdio> #include <algorithm> #include <iost ...

  4. DFS+模拟 ZOJ 3861 Valid Pattern Lock

    题目传送门 /* 题意:手机划屏解锁,一笔连通所有数字,输出所有可能的路径: DFS:全排列 + ok () 判断函数,去除一些不可能连通的点:) */ #include <cstdio> ...

  5. 逆序数 POJ 2299 Ultra-QuickSort

    题目传送门 /* 题意:就是要求冒泡排序的交换次数. 逆序数:在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序. 一个排列中逆序的总数就称为这个排列的逆 ...

  6. android studio ndk 调试

    一: 先看看用 ndk-gdb 手动调试 这种方法只适用于手动编写 Android.mk 的情况,因为我们要手动 build debug 版本的 .so 文件.具体可以参考我的前一篇文章. 1 And ...

  7. 如何在 .Net Framework 4.0 项目上使用 OData?

    最新的 Microsoft ASP.NET Web API 2.1 OData 5.1.0 已只能在 .Net Framework 4.5 的安装了,如果要在 VS2010的 .Net Framewo ...

  8. 【wikioi】1904 最小路径覆盖问题(最大流+坑人的题+最小路径覆盖)

    http://wikioi.com/problem/1904/ 这题没看数据的话是一个大坑(我已报告官方修复了),答案只要求数量,不用打印路径...orz 最小路径覆盖=n-最大匹配,这个我在说二分图 ...

  9. POJ 1177 Picture(求周长并)

    题目链接 看的HH的题解..周长有两部分组成,横着和竖着的,横着通过,sum[1] - last来计算,竖着的通过标记,记录有多少段. #include <cstdio> #include ...

  10. Ubuntu根目录下各文件夹的功能详细介绍

    Ubuntu的根目录下存在着很多的文件夹,但你知道他们都存放着哪些文件呢?这些是深入了解Ubuntu系统必不缺少的知识,本文就关于此做一下介绍吧. /bin/    用以存储二进制可执行命令文件. / ...