viewport 视口 (可视区视口)；
视口（viewport）是用户网页的可视区域，也可称之为视区。
默认不设置 viewport 可视区窗口的宽度在移动端的时候是980；
meta标签的设置 设置视口viewport
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" >| 属性 | 属性值 |
| width | 可视区的宽度(number || device-width) |
| user-scalable | 是否允许用户缩放( yes/no ) |
| initial-scale | 初始缩放比例,通过扩大或者缩小视觉视口的宽度实现 |
| maximum-scale | 最大缩放比例 |
| minimun-scale | 最小缩放比例 |
devicePixelRatio 设备像素比 = 物理像素（分辨率） / css像素 ；
表示把一个像素放大至N个像素去显示 (N表示为DPR)
例如：
css像素宽为375px的，那么设计图至少是750px的物理像素
现在 iphone 5 为 320px，那么设计图就要至少640px了
但是目前iphone5 很少用了，基本都是375px以上了，所以设计稿物理像素至少750px以上。
meta 常用设置
x5内核浏览器 可以控制横竖屏的显示；
QQ强制竖屏或者横屏
portrait||landscape 强制竖屏||强制横屏
<meta name="x5-orientation" content="portrait||landscape">QQ强制全屏
<meta name="x5-fullscreen" content="true">UC强制竖屏
<meta name="screen-orientation" content="portrait||landscape">UC强制全屏
<meta name="full-screen" content="yes">禁止拨号以及邮箱，忽略自动识别数字为电话号码 ：
<meta content="telephone=no,email=no" name="format-detection" />如果要拨号的话，另外加个a标签， 如同下面：
<a href="tel:13888888888">13888888888</a>
如果tel:110时，则会自动拨打110.所以前后要一致；
语法表示 tel:电话号码 如果要发送邮箱的话，加个a标签， 如同下面：
<a href="mailto:[email protected]">请发送邮件</a>
语法表示 mailto:目标地址移动端开发时的一些问题：
有一个字体设置专门是规范英文字体的，如下：
body{
font-family:helvetica;
}
中文字体该是怎样就怎样。a标签、input标签 消除 高亮显示：点击之后出现一个默认的阴影(正方形的) ，如下：
a,input{
-webkit-tap-highlight-color:transparent;
}点击时会有个默认阴影
<a href="#">永不放弃</a>标签 input 在 移动端，如下：
<input type="button" value="按钮" /> 正常情况下是正方形的；但是在 ios下默认为圆角；那怎么去除圆角呢？
input,button{
-webkit-appearance:none;
}怪异盒模型 box-sizing:border-box ;
<meta name="viewport" content="width=device-width,user-scalable=no" />
<style>
body{
margin:0px;
}
div{
width:80px;
height:100px;
float:left;
border:1px solid red;
box-sizing:border-box;
padding:10px;
/*怪异盒模型
width+padding+border=80 ;
盒子大小为80px,不会发生任何变化；
*/
}
</style>
<body>
<!-- 以iphone5为例：CSS像素宽为320px的情况下可以一排显示4个80px-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>rem:表示设置html根元素的字体大小；
html {
font-size: 16px;
}
/* html根元素的字体大小是16px，
* 那么 1rem = 1* 16px = 16px
* 2rem = 2 * 16px = 32px
*/<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>不要放弃</title>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<script>
(function(){
var html = document.documentElement;
// console.log(html) 拿到整个文档的所有元素
var hwidth = html.getBoundingClientRect().width;
// console.log(hwidth) 表示拿到不同设备的CSS像素宽
html.style.fontSize=hwidth/16 +'px' ;
// 这个16是自己定义的;好换算 好算数;以 iphone5 为例
// 1rem = 320/16 =20px 相当于 html{font-size:20px;}
console.log(hwidth) ;
// hwidth 是UI设计图的宽度
})()
</script>
<style>
body{
margin:0px;
}
div{
width:4rem;
height:5rem;
float:left;
border:1px solid red;
box-sizing:border-box;
}
div:nth-of-type(1){
background:red;
}
div:nth-of-type(2){
background:blue;
}
div:nth-of-type(3){
background:green;
}
div:nth-of-type(4){
background:yellow;
}
</style>
</head>
<body>
<!--
手机端一开始要先设置视口
-->
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>