今天在做适配手机版时，chrome调到手机版，但是还是显示PC端的样式，无法展现出手机端的样式；

开始的时候还以为是chrome版本的问题，最新版本的chrome62.0是有很多变化的，而之前工作中使用最多的chrome来调试，是带有标尺等等。

搜索chrome版本无果，想了下，按照道理chrome版本越新，功能应该更好用才是。

百度了一下，发现是因为这句话：<meta name="viewport" content="width=device-width, initial-scale=1.0">；

后来我就看了下百度首页的手机版，也发现了这句话：

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

于是我加上这句话就解决了。

回过头，我再看看bootstrap文档起步的说明：

基本模板：

使用以下给出的这份超级简单的 HTML 模版，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。

拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

下面摘抄自其它博客资料：

转载自博客 http://blog.csdn.net/u012402190/article/details/70172371

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

我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

这个name为viewport的meta标签到底有哪些东西呢，又都有什么作用呢？

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

width 设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

此外，在安卓中还支持  target-densitydpi  这个私有属性，它表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素

target-densitydpi  值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

特别说明的是，当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。

因为这个属性只有安卓支持，并且安卓已经决定要废弃target-densitydpi  这个属性了，所以这个属性我们要避免进行使用  。

<meta name="viewport" content="width=device-width, initial-scale=1.0">的说明的更多相关文章

  1. 关于<meta name="viewport" content="width= device-width,user-scalable= 0,initial-scale= 1.0,minimum-scale= 1.0">

    <meta name="viewport" content=" width= device-width, user-scalable= 0, initial-sca ...

  2. <head>中<meta name="viewport" content="width=device-width,initical-scale=1"的作用>

    <meta name="viewport" content="width=device-width,initical-scale=1"的作用> co ...

  3. 论meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1的作用

    一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取ph ...

  4. meta name="viewport" content="width=device-width,initial-scale=1.0" 解释

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

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

    今天第一次用JQuery Mobile做了个3个手机小页面,一个登陆页面.一个列表页面和一个表单页面,页面中的组件呈现一切正常. 但出现了一个奇怪的问题,登陆页面大小正常,到了列表页面和表单页面就显得 ...

  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalabl ...

  7. [HTML] <meta name="viewport" content="width=device-width,initial-scale=1.0">释义

    <meta name="viewport" content="width=device-width,initial-scale=1.0">这是 HT ...

  8. <meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">的作用

    本人对该标签理解不深,这里是复制了穆乙的文章:如果有人进来看到这篇文章,请按此https://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.ht ...

  9. <meta name="viewport" content="width=device-width, initial-scale=1.0">理解

    ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort <meta>标记还表示文档针对移动设 ...

随机推荐

  1. godaddy之ssl申请

    第一步 执行下面命令生成csr和key文件 openssl req -new -newkey rsa: -nodes -keyout trips.com.key -out trips.com.csr ...

  2. 使用 v-cloak 防止页面加载时出现 vue.js 的变量名

    知识点:使用 v-cloak 防止页面加载时出现 vue.js 的变量名 场景:在使用vue语法,实现下拉框功能时,展示数据列表之前,出现对应的 vuejs 变量名 代码: var vm = new ...

  3. NIO概述及实例（时钟服务器）

    NIO,非阻塞IO,重点是非阻塞而不是异步! NIO的一般实现如下: package com.pt.nio; import java.net.InetSocketAddress; import jav ...

  4. calcite介绍

    前言 calcite是一个可以将任意数据查询转换成基于sql查询的引擎,引擎特性也有很多,比如支持sql树的解析,udf的扩展,sql执行优化器的扩展等等.目前已经被很多顶级apache项目引用,比如 ...

  5. 对CCLE数据库可以做的分析--转载

    转载:http://www.bio-info-trainee.com/1327.html 收集了那么多的癌症细胞系的表达数据,拷贝数变异数据,突变数据,总不能放着让它发霉吧! 这些数据可以利用的地方非 ...

  6. (CLR via C#学习笔记)异步操作 - 线程池

    一 线程池基础 1.线程池维护了一个操作请求队列,将请求的操作追加到线程池队列中,线程池的代码从队列中提取操作项,派发给线程池中的线程; 2.CLR初始化时,线程池中是没有线程的,当有操作派发给线程池 ...

  7. [oracle]创建查看 LOCAL INDEX

    create index IDX_T_GPS_CPH_local on T_GPS (CPH) local; create index IDX_T_GPS_SJ_local on T_GPS (SJ) ...

  8. JavaScript学习总结(二十一)——使用JavaScript的数组实现数据结构中的队列与堆栈

    今天在项目中要使用JavaScript实现数据结构中的队列和堆栈,这里做一下总结. 一.队列和堆栈的简单介绍 1.1.队列的基本概念 队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被 ...

  9. 简单地为DBNavigator填加Caption

    http://bbs.2ccc.com/topic.asp?topicid=346735 http://www.cnblogs.com/GarfieldTom/archive/2010/01/18/1 ...

  10. Sizzle源码分析：一 设计思路

    一.前言 DOM选择器(Sizzle)是jQuery框架中非常重要的一部分,在H5还没有流行起来的时候,jQuery为我们提供了一个简洁,方便,高效的DOM操作模式,成为那个时代的经典.虽然现在Vue ...