目錄：
1.新建空白頁(yè) meta標(biāo)簽相關(guān)
2.整體布局
1.新建空白頁(yè) meta標(biāo)簽相關(guān)
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
上面的代碼依次表示設(shè)置視口寬度為設(shè)備的寬度，默認(rèn)不縮放，不允許用戶縮放（即禁止縮放），在網(wǎng)頁(yè)加載時(shí)隱藏地址欄與導(dǎo)航欄（ios7.1新增）。
相關(guān)參數(shù)：
width – // [pixel_value | device-width] viewport 的寬度，范圍從 200 到 10,000，默認(rèn)為 980 像素
height – // [pixel_value | device-height ] viewport 的高度，范圍從 223 到 10,000
initial-scale – // float_value，初始的縮放比例 （范圍從 > 0 到 10） （值越大是放大）
minimum-scale – // float_value，允許用戶縮放到的最小比例
maximum-scale – // float_value，允許用戶縮放到的最大比例
user-scalable – // [yes | no] 用戶是否可以手動(dòng)縮放
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目標(biāo)屏幕像素密度
DEMO: http://output.jsbin.com/ceqexapa/8
<meta name="apple-mobile-web-app-capable" content="yes" />
是否啟動(dòng)webapp功能，會(huì)刪除默認(rèn)的蘋果工具欄和菜單欄。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
當(dāng)啟動(dòng)webapp功能時(shí)，顯示手機(jī)信號(hào)、時(shí)間、電池的頂部導(dǎo)航欄的顏色。默認(rèn)值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。這個(gè)主要是根據(jù)實(shí)際的頁(yè)面設(shè)計(jì)的主體色為搭配來(lái)進(jìn)行設(shè)置。
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="format-detection"content="telephone=no, email=no" />
忽略頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼 電子郵件識(shí)別
其他常用meta:
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
如果apple-mobile-web-app-capable設(shè)置為yes了，那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按鈕將網(wǎng)站添加到主屏幕上。而通過(guò)設(shè)置相應(yīng)apple-touch-icon標(biāo)簽，則添加到主屏上的圖標(biāo)就會(huì)使用我們指定的圖片。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
圖標(biāo)使用的優(yōu)先級(jí)如下：
- 如果沒有跟相應(yīng)設(shè)備推薦尺寸一致的圖標(biāo)，那個(gè)會(huì)優(yōu)先使用比推薦尺寸大，但最接近推薦尺寸的圖標(biāo)。
- 如果沒有比推薦尺寸大的圖標(biāo)，會(huì)優(yōu)先選擇最接近推薦尺寸的圖標(biāo)。
- 如些有多個(gè)圖標(biāo)符合推薦尺寸，會(huì)優(yōu)先選擇包含關(guān)鍵字precomposed的圖標(biāo)。
同樣基于apple-mobile-web-app-capable設(shè)置為yes，可以用WebApp設(shè)置一個(gè)類似NativeApp的啟動(dòng)畫面。
<link rel="apple-touch-startup-image" href="/startup.png">
和apple-touch-icon不同，apple-mobile-web-app-capable不支持sizes屬性，所以使用media來(lái)控制retina和橫豎屏加載不同的啟動(dòng)畫面。
// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
// iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
// iPhone 5
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
// iPad portrait
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
// iPad landscape
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
// iPad Retina portrait
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
// iPad Retina landscape
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />
總結(jié)
空白頁(yè)面模板，然后再根據(jù)具體情況在此基礎(chǔ)上添加apple-touch-icon和apple-touch-startup-image
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<title>Document</title>
</head>
<body> </body>
</html>
2.整體布局
fixed布局：
<header class="header fixed-top">
</header>
<div class="wrap-page">
<section class="page"></section>
<section class="page"></section>
...
</div>
<footer class="footer fixed-bottom"></footer>
考慮到可滾動(dòng)的為page內(nèi)容，所以我們得給wrap-page一個(gè)具體的高度，然后使用原生的-webkit-overflow-scrolling:touch;
結(jié)構(gòu)優(yōu)化（智能識(shí)別padding）（兼容性不好 高版本）
<header class="header fixed-top"></header>
<footer class="footer fixed-bottom"></footer>
<div class="wrap-page">
<section class="page"></section>
<section class="page"></section>
...
</div>
這樣我們就可以采用兄弟選擇器，設(shè)置上下的padding：
.header ~ .wrap-page {
padding-top: 44px;
}
.footer ~ .wrap-page {
padding-bottom: 44px;
}
.header-sub ~ .wrap-page { padding-top: 88px; } //雙層頭部寫法
所以如果我們采用這種布局，header和footer絕對(duì)不能采用顯示顯示隱藏的方式來(lái)搞，而應(yīng)該采用替換形式，沒有則刪除。
絕對(duì)定位布局
.header,.footer,.wrap-page{
position:absolute;
left:0;
right:0;
}
.header,.footer{
height:44px;
background-color: #fff;
text-align: center;
z-index:900;
line-height:44px;
}
.header{
top: 0;
border-bottom: 1px solid #f00;
}
.footer{
bottom: 0;
border-top: 1px solid #f00;
}
.wrap-page{
top: 44px;
bottom: 44px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.page{
padding: 10px;
}
.page p{
margin-bottom: 10px;
}
這個(gè)布局的缺陷在于滾動(dòng)的時(shí)候地址欄不隱藏，safari瀏覽器可以通過(guò)下面js代碼來(lái)隱藏地址欄，其他瀏覽器經(jīng)測(cè)試不可以
window.addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});
flex 布局
body {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.wrap-page {
-webkit-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.header,.footer{
height:44px;
background-color: #fff;
text-align: center;
line-height:44px;
position:relative;
z-index:990;
}
.header{
border-bottom: 1px solid #f00;
}
.footer{
border-top: 1px solid #f00;
}
.wrap-page{
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.page{
padding: 10px;
}
.page p{
margin-bottom: 10px;
}
## 總結(jié)
fixed滑動(dòng)式有bug flex兼容性不好 所以一般用絕對(duì)布局
