移動端頁面製做
1：pc端響應式開發
火狐瀏覽器
打開菜單欄，點擊開發者，選擇咱們的響應式設計 ctrl+shiift+M
谷歌瀏覽器
點擊「show console」圖標，打開模擬面板，使用"User Agent"，選擇所要模擬的機子，點擊emulate按鈕模擬，刷新瀏覽器。如要調整橫豎屏，切換到"screen"javascript
2：新建頁面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
meta標籤
<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" />
viewport
視圖窗口，移動端特屬的標籤。通常使用下面這段代碼便可：css
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
上面的代碼依次表示設置寬度爲設備的寬度，默認不縮放，不容許用戶縮放（即禁止縮放），在網頁加載時隱藏地址欄與導航欄（ios7.1新增）。html
width – // [pixel_value | device-width] viewport 的寬度，範圍從 200 到 10,000，默認爲 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] 用戶是否能夠手動縮放 target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目標屏幕像素密度
注：target-densitydpi屏幕像素密度和縮放有關，你能夠試試修改這個demo，用手機看下實際效果。我通常不設置這個屬性。前端
apple-mobile-web-app-capable
是否啓動webapp功能，會刪除默認的蘋果工具欄和菜單欄。java
<meta name="apple-mobile-web-app-capable" content="yes" />
apple-mobile-web-app-status-bar-style
當啓動webapp功能時，顯示手機信號、時間、電池的頂部導航欄的顏色。默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）。這個主要是根據實際的頁面設計的主體色爲搭配來進行設置。ios
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
注：若是對apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style不太理解，可查閱下面的參考資料第三篇文章，裏面有截圖說明。web
telephone & email
忽略頁面中的數字識別爲電話號碼canvas
<meta name="format-detection" content="telephone=no" />
一樣還有一個email識別windows
<meta name="format-detection" content="email=no" />
固然二者能夠寫在一塊兒瀏覽器
<meta name="format-detection" content="telphone=no, email=no" />
其餘meta
<!-- 啓用360瀏覽器的極速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微軟的老式瀏覽器 --> <meta name="MobileOptimized" content="320"> <!-- uc強制豎屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ強制豎屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC強制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ強制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC應用模式 --> <meta name="browsermode" content="application"> <!-- QQ應用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 點擊無高光 --> <meta name="msapplication-tap-highlight" content="no">
參考資料：
- Supported Meta Tags section of the Safari HTML Reference
- 移動前端工做的那些事---前端製做篇之meta標籤篇
- 移動平臺的meta標籤-----神奇的功效
- WebApp之Meta標籤
link標籤
apple-touch-icon
若是apple-mobile-web-app-capable設置爲yes了，那麼在iPhone,iPad,iTouch的safari上可使用添加到主屏按鈕將網站添加到主屏幕上。而經過設置相應apple-touch-icon標籤，則添加到主屏上的圖標就會使用咱們指定的圖片。
如下是針對ox不一樣設備，選擇一個最優icon。默認iphone的大小爲60px，ipad爲76px，retina屏乘以2倍。
<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">
ios7之前系統默認會對圖標添加特效（圓角及高光），若是不但願系統添加特效，則能夠用apple-touch-icon-precomposed.png代替apple-touch-icon.png
圖標使用的優先級以下：
- 若是沒有跟相應設備推薦尺寸一致的圖標，那個會優先使用比推薦尺寸大，但最接近推薦尺寸的圖標。
- 若是沒有比推薦尺寸大的圖標，會優先選擇最接近推薦尺寸的圖標。
- 如些有多個圖標符合推薦尺寸，會優先選擇包含關鍵字precomposed的圖標。
若是未在區域指定用link標籤指定圖標，會自動搜索網站根目錄下以apple-touch-icon爲前綴的png圖標。
注：ios7再也不爲icon添加特效，ios7之前則默認爲icon添加特效，除非icon有關鍵字-precomposed.png爲後綴。
參考資料：
- Specifying a Webpage Icon for Web Clip
- WebApp之 apple-touch-icon
- http://taylor.fausak.me/2013/11/01/ios-7-web-apps/
apple-touch-startup-image
一樣基於apple-mobile-web-app-capable設置爲yes，能夠用WebApp設置一個相似NativeApp的啓動畫面。
<link rel="apple-touch-startup-image" href="/startup.png">
和apple-touch-icon不一樣，apple-mobile-web-app-capable不支持sizes屬性，因此使用media來控制retina和橫豎屏加載不一樣的啓動畫面。
// 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" />
參考資料：
總結
空白頁面模板，而後再根據具體狀況在此基礎上添加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>
3：總體佈局
移動端和pc端同樣總體上佈局也能夠分爲上中下三部分，如圖：
通常來講,header和footer部分都爲fixed定位，中間的內容區域可滾動。
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>
由於移動端單頁面特性，因此每一個page爲一個頁面，而後總體使用wrap-page包裹。考慮到可滾動的爲page內容，因此咱們得給wrap-page一個具體的高度，而後使用原生的-webkit-overflow-scrolling:touch;來實現滾動，固然對於不支持的，也可使用iscroll來兼容，而iscroll一樣也須要一個固定高度的容器來包裹可滾動的內容。
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body, .wrap-page { height: 100%; } .wrap-page { -webkit-overflow-scrolling: touch; } .fixed-top { position: fixed; left: 0; right: 0; top: 0; z-index: 960; } .fixed-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 940; }
雖然header和footer部分採用了fixed定位，脫離了文檔流，但仍是會擋住下面的內容，因此有必要對wrap-page設置上下的padding間隔，以防止header和footer遮擋page內容（假設header和footer高度各爲44px）：
.wrap-page { padding-top: 44px; padding-bottom: 44px; }
看起來不錯，不過若是碰到有些頁面有header和footer，而有些頁面只有header，而有些甚至有兩個header部分，這麼一刀切的方法顯然不合適。按照這個結構只好經過js來給wrap-page添加不一樣的class來設置上下的padding。下面咱們說下另外一種用css就能解決的方法。
優化結構
此次咱們把footer提到wrap-page上面，而後採用兄弟選擇器，就能夠解決剛纔那個padding問題，ratchet就是採用該方法（經反饋，一些國產的安卓機對兄弟元素選擇器支持不太好，因此這個方案適合高上大的玩，更新時間：2014-07-03）
<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>
這樣咱們就能夠採用兄弟選擇器，設置上下的padding：
.header ~ .wrap-page { padding-top: 44px; } .footer ~ .wrap-page { padding-bottom: 44px; }
一樣若是有二層header部分（如搜索框）：
<header class="header fixed-top"></header> <section class="header-sub"></section> <footer class="footer fixed-bottom"></footer> <div class="wrap-page"> <section class="page"></section> <section class="page"></section> ... </div>
仍是採用兄弟選擇器，將wrap-page的padding-top設置爲header的高度加上header-sub的高度：
.header-sub ~ .wrap-page { padding-top: 88px; }
看起來不錯，不再用經過js來判斷對wrap-page增刪class了。
不過這個也一樣有個問題，爲了說明這個問題，咱們仍是回到移動端單頁面特性這個上面，咱們的頁面是經過page的形式添加到wrap-page這個包裹上的，每次只顯示一個而已。
<div class="wrap-page"> <section class="page"></section> <section class="page" style="display:none;"></section> <section class="page" style="display:none;"></section> ... </div>
固然每一個頁面不可能只有content部分，也會有header和footer，不一樣頁面存在不一樣的header或footer這是絕對可能的。那麼若是header和footer部分也經過這種顯示隱藏的方式來搞呢？
如：咱們從一個有header和footer的頁面，切換到一個只有header的頁面，且header改變，就會成爲下面這樣：
<header class="header fixed-top" style="display:none;"></header> <header class="header fixed-top"></header> <footer class="footer fixed-bottom" style="display:none;"></footer>
這樣雖然footer隱藏了，可是對於下面這條樣式一樣仍是會解析生效，wrap-page會有44px的padding-bottom
.footer ~ .wrap-page { padding-bottom: 44px; }
因此若是咱們採用這種佈局，header和footer絕對不能採用顯示顯示隱藏的方式來搞，而應該採用替換形式，沒有則刪除。具體能夠參考ratchet的實現方式
絕對定位佈局
關鍵在於設置wrap-page的top，bottom的距離爲header和footer的高度。
css代碼以下：
.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; }
這個佈局的缺陷在於滾動的時候地址欄不隱藏，safari瀏覽器能夠經過下面js代碼來隱藏地址欄，其餘瀏覽器經測試不能夠
window.addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); });
若是你實在要除掉瀏覽器的地址欄和工具欄，能夠設置meta標籤爲應用模式，參考新建空白頁面的其餘meta部分
<!-- UC應用模式 --> <meta name="browsermode" content="application"> <!-- QQ應用模式 --> <meta name="x5-page-mode" content="app">
flex佈局
能夠經過這個簡單的demo來測試：flex layout demo
設置body爲flex佈局，方向爲垂直方向，wrap-page的flex爲1。這個跟上面的絕對定位同樣，仍是滾動的時候地址欄不隱藏，safari一樣能夠經過js來搞定，其餘瀏覽器不能夠
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: