今天在做适配手机版时，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. 记第一场atcoder和codeforces 2018-2019 ICPC, NEERC, Northern Eurasia Finals Online Mirror

    下午连着两场比赛,爽. 首先是codeforses,我和一位dalao一起打的,结果考炸了,幸亏不计rating.. A Alice the Fan 这个就是记忆化搜索一下预处理,然后直接回答询问好了 ...

  2. 简单实现Ubuntu16.04 + caffe2 + CUDA9.0 + cuDNN8.0

    在Ubuntu16.04 CUDA9.0 cuDNN8.0的环境下安装caffe2 本博客比较简单,cuda9.0 cudnn8.0部分请看上一篇博客,其中详细讲了: 如何安装驱动 安装cuda 安装 ...

  3. 将日期转换为指定的格式：比如转换成 年月日时分秒 这种格式：yyyy-MM-dd hh:mm:ss 或者 yyyy-MM-dd。总结下。

    可以为Date原型添加如下的方法: Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth() ...

  4. POJ 1061 青蛙的约会（扩展欧几里得算法）

    http://poj.org/problem?id=1061 思路: 搞懂这个扩展欧几里得算法花了不少时间,数论真的是难啊. 含义:找出一对整数,使得ax+by=gcd(a,b). 接下来看这道题目, ...

  5. Java网络编程和NIO详解2：JAVA NIO一步步构建IO多路复用的请求模型

    Java网络编程与NIO详解2:JAVA NIO一步步构建IO多路复用的请求模型 知识点 nio 下 I/O 阻塞与非阻塞实现 SocketChannel 介绍 I/O 多路复用的原理 事件选择器与 ...

  6. CSS padding 属性

    定义和用法 padding 简写属性在一个声明中设置所有内边距属性. 说明 这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度.行内非替换元素上设置的内边距不会影响行高计算:因此,如果一 ...

  7. PHP:第五章——字符串的概念

    <?php header("Content-Type:text/html;charset=utf-8"); //字符串概念: //1.单引号.//里面的变量不会被解释 //例 ...

  8. vue2 过渡动画

    <body> <div id="app"> <transition name="move"> // transition里面 ...

  9. AutoFac IoC DI 依赖注入

    AutoFac IoC DI 依赖注入 记录点点滴滴知识,为了更好的服务后来者! 一.为什么使用AutoFac? 之前介绍了Unity和Ninject两个IOC容器,但是发现园子里用AutoFac的貌 ...

  10. Mysql5.7的gtid主从半同步复制和组复制

    (一)gtid主从半同步复制 一.半同步复制原理 mysql默认的复制是异步的,主库在执行完客户端提交的事务后会立即将结果返回给客户端,并不关心从库是否已经接收并处理,这样就会有一个问题,主库如果cr ...