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. 大牛之路II

    时间限制:500MS  内存限制:1000K 提交次数:138 通过次数:31 题型: 编程题   语言: C++;C Description 要成为ACM大牛,要掌握很多必需的知识点.某些知识点可以 ...

  2. centos 安装网络错误

    yum install vnc-server 提示安装成功 rpm -q vnc-server 返回  package vnc-server is not installed 然而再重新安装时  yu ...

  3. HTML的快速写法:Emmet和Haml

    HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法—-简写法. 常用的简写法,目前主要是Emmet和Haml两种 ...

  4. javascript继承扩展类方法实现

    javascript没有原生的继承语法,这确实很让人困惑,但是广大人民群从的智慧是无穷的.最近呢,正尝到一点从源码中学习的甜头,不分享一下实在难以平复激动的心情.前不久改造视频播放插件的时候,找到了v ...

  5. MONO 说谈

     Xamarin android现在到底依赖Dalvik不?是部分依赖的 驱动 编译后的IL经过CLR并不能直接成为机器码,而是要借助Dalvik才能成为机器码吗? 而是关于Android的驱动部分主 ...

  6. Centos6.4 yum安装MariaDB5.5

    vi /etc/yum.repos.d/MariaDB.repo 加入下面内容 [mariabd]name=MariaDBbaseurl=http://yum.mariadb.org/5.5.34/c ...

  7. C#引用COM对象,报错:《类型 *** 未定义构造函数, 无法嵌入互操作类型 *** 。请改用适用的接口》的解决办法。

    错误信息: 1.类型“SQLDMO.BackupClass”未定义构造函数 2.无法嵌入互操作类型“SQLDMO.BackupClass”.请改用适用的接口. 代码如下:                ...

  8. sql server导出insert语句

    在所需要导出数据库上右键 选择[任务] 然后选择[生成脚本] 选择数据库,点击下一步到[数据脚本选项] 编写数据的脚本 选择为true  这一步很重要 下一步选择要导出的对象 下一步选择表 点击完成 ...

  9. The declared package does not match the expected package

    The declared package does not match the expected package. 1.选中项目右击选择Build Path-->再选择Configure Bui ...

  10. win95+ie3-win10+ie11 浏览器执行漏洞

    alliedve.htm <!doctype html><html><meta http-equiv="X-UA-Compatible" conten ...