<meta name="viewport" content="width=device-width, initial-scale=1.0">的说明
今天在做适配手机版时,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
我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的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 这个属性了,所以这个属性我们要避免进行使用 。
最新文章
- 122. Best Time to Buy and Sell Stock(二) leetcode解题笔记
- vc++6.0各种报错合集(附:VC++6.0调出打印窗口的方法)
- HTTP协议---HTTP请求中的常用请求字段和HTTP的响应状态码及响应头
- 调整iFrame高度
- Codeforces 687C. The Values You Can Make (dp)
- nginx 站点80跳443配置
- JAVA Timer定时器使用方法(二)
- Laravel中间件
- python---------函数练习题
- Linux入门(13)——Ubuntu16.04下将图片和pdf互转
- AngularJS数据绑定中数据监控的机制说明
- 阿里面试题,深入理解Java类加载机制
- NOIP引水入城(dfs)
- 【BZOJ1082】【SCOI2005】栅栏
- Fragment的坑
- oracle profile 概要文件
- Qt 自学QGraphicsItem要点 积累
- Maven学习总结(七):Maven的聚合和继承
- Ruby中类的进阶(继承,private, public, protect)
- 获取应用版本号,版本名称,包名,AppName,图标,是否是系统应用,获取手机中所有应用,所有进程