今天在做适配手机版时，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. python find 返回元素的索引

    As it turns out, there is a string method named find that is remarkably similar to the function we w ...

  2. 用 SQL 对关系型数据库进行查询

    前面几节中,我们已经掌握了如何向 SQLite 数据库中写入数据.这一节,我们将学习如何根据需求对数据库进行查询,进而从中获取数据.接下来的例子中会使用 data/datasets.sqlite(之前 ...

  3. 【测试设计】性能测试工具选择：wrk？jmeter？locust？还是LR？

    原文链接:http://www.51testing.com/html/49/n-3721249.html 前言 当你想做性能测试的时候,你会选择什么样的测试工具呢?是会选择wrk?jmeter?loc ...

  4. Eclipse 常用快捷键和使用技巧

    1.查看快捷键定义的地方 Window->Preferences->General->Keys. 2.更改启动页 在AndroidManifest.xml第一个activity标签项 ...

  5. Presto改造

    最近在打造一款可视化分析产品, 需要用到组合多数据源, 进行查询, 看了挺多开源的插件, 发现目前只有Presto比较符合, 但是由于Presto没有多用户机制和资源管理, 所以需要在这基本上构建多用 ...

  6. 使用扩展方法(Chapter3 P39-41)

    namespace LanguageFeatures { public class ShoppingCart { public List<Product> Products { get; ...

  7. 使用POI动态更新导出的EXCEL模板中的列

    基本思路: 1.从附件服务器上取得模板的流文件 2.拿到流文件之后再使用workbook.write(outs);方法改变流文件中的数据. else if (pageContext.getParame ...

  8. python高级编程之列表推导式

    1. 一个简单的例子 在Python中,如果我们想修改列表中所有元素的值,可以使用 for 循环语句来实现. 例如,将一个列表中的每个元素都替换为它的平方: >>> L = [1, ...

  9. SqlServer缓存依赖 示例

    ------------------------------------------------------------c#代码----------------------using System; ...

  10. 7-8 List Leaves（25 分）

    Given a tree, you are supposed to list all the leaves in the order of top down, and left to right. I ...