移動端開發常用設置。

以前好像也寫過移動端開發的一些設置，但是零零散散的，這次想總結起來，免得自己又忘了！

1.移動端meta常見設置及釋義

<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detecation">
<meta content="yes" name="app-mobile-web-app-capable">
//當網站添加主屏幕快速啓動方式，可以隱藏地址欄（蘋果）。
<meta content="black" name="app-mobile-web-app-status-bar-style">
//當網站添加主屏幕快速啓動方式，顯示狀態欄的樣式（蘋果）。

代碼	釋意
width=device-width	設置視口寬度等於設備寬度
initial-scale=1.0	初始化不縮放
maximum-scale=1.0	最大縮放比例1
user-scalable=no	禁止用戶縮放頁面
telephone=no	忽略頁面中數字識別爲電話
email=no	忽略頁面中郵箱識別

Iphone5	4英寸	640*1136	326ppi
Iphone6	4.7英寸	750*1334	326ppi
Iphone7	5.5英寸	1080*1920	406ppi

2.移動端通過css媒體查詢適配不同dpr的手機樣式寫法示例：

.box{
	width:375px;
	background-image:url('img_2x.png')
}

@media only screen(device-width:375px) and (-webkit-min-device-pixel-ratio:3){
	.box:{
		width:125px;
		background-image:url('img_3x.png')
		}
}