为了让 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 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

  

 

bootstrap之移动支持的更多相关文章

  1. 好用的自适应表格插件-bootstrap table (支持固定表头)

    最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...

  2. 【bootstrap】使用支持bootstrap的时间插件daterangepicker

    其中的架包和代码,具体可以去GitHub下查看: https://github.com/AngelSXD/myagenorderdiscount 1.引入js和css <link href=&q ...

  3. 让BOOTSTRAP默认SLIDER支持触屏设备

    var isTouch=('ontouchstart' in window); if(isTouch){ $(".carousel").on('touchstart', funct ...

  4. 12月6日 看Active Record validation ; 做jdstore ,注意gem bootstrap 版本只支持bootstrap3。

    Active Record validation: new_record?()//用于验证刚新建,但没存入database中的数据 ,返回true或false persisted?() //和new_ ...

  5. bootstrap添加多个模态对话框支持

    bootstrap添加多个模态对话框支持 (2015-03-04 21:05:35) 转载▼ 标签: 房产   因为项目需要,在页面交互上要弹出多个dialog窗口,而bootstrap的modal支 ...

  6. JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  7. bootstrap学习笔记--bootstrap概览

    HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...

  8. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  9. BootStrap的一个标准框架的内容解释——来源于bootstrap官网

    <!DOCTYPE html><!--HTML5的定义--><html lang="zh-cn"> <head> <meta ...

随机推荐

  1. 3. Longest Substring Without Repeating Characters(c++) 15ms

    Given a string, find the length of the longest substring without repeating characters. Examples: Giv ...

  2. curl及postman专题

    一. 步骤 1: 下载cURL工具 使用您的Windows机器从cURL web站点下载最新版本的cURL: (1) 通常情况下,多数的Windows用户可以从官网下载页面http://curl.ha ...

  3. iOS-最全的App上架教程

    App上架教程 心情有没有好一点 在上架App之前想要 真机测试的同学 请查看iOS- 最全的真机测试教程 里面包含怎么让多台电脑同时 上架App和同时真机调试.P12文件的使用详解 因为最近更新了X ...

  4. 导入maven工程错误

    有时候导入maven工程会报空指针异常: An internal error occurred during: “Updating Maven Project”. java.lang.NullPoin ...

  5. Appium for iOS setup

    windows下appium设置 之前研究了一段时间的appium for native app 相应的总结如下:                                           ...

  6. JS学习进阶中 come on!

    1,定义新的属性来扩展对象 新方法:defineProperty() 实例: var data = {}: Object.defineProperty(data,"type",{ ...

  7. Android-LinearLayout(线性布局)

    布局:Android为我们提供了一个View和ViewGroup子类的集合.ViewGroup类是View的子类,也被称为Layout布局,它提供了流式布局.线性布局等多种布局方式.View是绘制在屏 ...

  8. CentOS7 编译安装 nginx-1.10.0

    对于NGINX 支持epoll模型 epoll模型的优点 定义: epoll是Linux内核为处理大批句柄而作改进的poll,是Linux下多路复用IO接口select/poll的增强版本,它能显著的 ...

  9. 解决浏览器Adobe Flash Player不是最新版本问题

    关键:选择谷歌浏览器的PPAPI版本的flash下载直接安装即可 搜索: Adobe Flash Player PPAPI 下载地址: http://www.wmzhe.com/soft-30259. ...

  10. SQL Server 2012 开发新功能 序列对象(Sequence)(转)

    转载链接:http://www.cnblogs.com/zhangyoushugz/archive/2012/11/09/2762720.html 众所周知,在之前的sqlserver版本中,一般采用 ...