viewport 視口 (可視區視口)；
視口（viewport）是用戶網頁的可視區域，也可稱之爲視區。
默認不設置 viewport 可視區窗口的寬度在移動端的時候是980；
meta標籤的設置 設置視口viewport
<meta name="viewport" content="width=device-width,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:目標地址
移動端開發時的一些問題：
1、 有一個字體設置專門是規範英文字體的，如下：
body{
font-family:helvetica;
}
中文字體該是怎樣就怎樣。
2、a標籤、input標籤 消除 高亮顯示：點擊之後出現一個默認的陰影(正方形的) ，如下：
a,input{
-webkit-tap-highlight-color:transparent;/*或者是 rgba(0,0,0,0)*/
}
點擊時會有個默認陰影
<a href="#">永不放棄</a>
3、標籤 input 在 移動端，如下：
<input type="button" value="按鈕" />
正常情況下是正方形的；但是在 ios下顯示效果爲圓角；那怎麼去除圓角呢？去掉 ios 中 html 的 input 元素顯示圓角問題如下：
input,button{
-webkit-appearance:none;
border-radius:0;
}
怪異盒模型 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>