html5移動web開發(fā)實戰(zhàn)必讀書記
一、配置移動開發(fā)環(huán)境
1.各種仿真器、模擬器的下載安裝
http://www.mobilexweb.com/emulators
https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulators-&-Simulators
2.html5 DTD
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
safari: 設為屏幕寬度，并根據initial-scale=1.0禁止瀏覽器縮放
3.幫助html5跨瀏覽器的庫
modernizr
html5shim
innershiv
4.使html5元素在舊版本IE中變成塊級元素以及css重置
5.始終使用流式布局fluid layout
6.css媒介查詢 media query
@media screen and (min-width: 480px) {...}
@media only screen and (min-width: 320px) {...}
7.用戶需求分析工具
google analytics
percentmobile
jQuery mobile的瀏覽器分級列表：http://jquerymobile.com/gbs/
https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices
二、移動端的配置和優(yōu)化
1.提供啟動圖標（優(yōu)化對各種瀏覽器的支持）
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114-precomposed.png"> # iphone4
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72-precomposed.png"> # ipad
<link rel="apple-touch-icon-precomposed" href="icons/apple-touch-icon-precomposed.png"> # android
<link rel="shortcut icon" href="icons/apple-touch-icon.png"> # symbian60
?
文檔：關于觸摸式圖標的一起
2.避免字體被瀏覽器自動重置
html {
? ? -webkit-text-size-adjust: none;
}
改進
html {
? ? -webkit-text-size-adjust: 100%;
? ? -ms-text-size-adjust: 100%;
? ? text-size-adjust: 100%;
}
3.使用px
4.瀏覽器寬度完整解決方案
<meta name="HandheldFriendly" content="true"> # 古老版本瀏覽器
<meta name="MobileOptimized" content="320"> # 老版本瀏覽器
<meta name="viewport" content="width=device-width">
5.修復移動版safari的re-flow scale問題
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0"> # 不能縮放了
使用js代碼解決不能縮放問題：
var metas = document.getElementByTagName("meta");
var i;
if(navigator.userAgent.match("/iPhone/i)) {
? for(i=0; i<metas.length; i++) {
? ? if(meta[i].name == "viewport") {
? ? ? metas[i].content = "width=device-width, maximum-scale=1.0, minimum-scale=1.0";
? ? }
? }
? document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
? for(i=0; i<metas.length; i++) {
? ? if(meta[i].name == "viewport") {
? ? ? metas[i].content = "width=device-width, maximum-scale=1.6, minimum-scale=0.25";
? ? }
? }
}
?
更好的版本：https://gist.github.com/903131
jquery mobile版本：https://gist.github.com/1183357
6.在瀏覽器中啟動原生應用
查看safari，黑莓，索愛支持哪些鏈接啟動原生應用
7.iphone下全屏
<meta name="apple-mobile-web-app-capable" content="yes"> # 從界面圖標啟動時，全屏
<meta name="apple-mobile-web-app-status-bar-style" content="black"> # 頂部一個狀態(tài)欄
<link rel="apple-touch-startup-image" href="img/1/splash.png"> # 預加載界面圖片，類似ajax效果
8.防止ios在聚焦時自動縮放，例如填寫表單時
<script>
</script>
9.禁用或者限制部分webkit特性
-webkit-touch-callout
-webkit-user-select
-webkit-tap-highlight-color
-webkit-appearance
為狹窄的瀏覽器添加省略號功能：
.ellipsis {
? text-overflow: ellipsis;
? overflow: hidden;
? white-space: nowrap;
}
三、移動設備的交互方式
1.利用觸控來移動頁面元素
2.檢測盒處理橫豎屏切換事件
window.onorientationchange事件
禁止橫豎屏對于網友非常困難
3.利用手勢旋轉頁面元素
ongestureend
4.利用滑動創(chuàng)建圖庫
zepto框架
5.利用手勢縮放圖片
ongesturechange
四、構建快速響應式移動互聯網站點
1.html5標簽
header，nav，footer，small，address
2.css3輔助
polyfills庫
ultimate css gradient generator # css線性漸變效果編輯器
CSS3 PIE # 兼容IE9
3.響應式
使用modernizr庫開檢查瀏覽器對html3和css3的支持
可以用來檢查后是否加載respond.min.js
yepnope異步加載
4.檢測客戶端
.htaccess重定向
5.使用書簽冒泡為應用添加桌面快捷方式
mobilebookmark bubble庫 from google # 只支持safari
6.構建可伸縮的文本輸入框
mobile boilerplate庫的helper.js
7.加速按鈕反饋
touchstart
8.隱藏瀏覽器地址欄
MBP.hideUrlBar();
五、移動設備訪問
1.獲取位置信息
經度、緯度、當前位置的精確程度
navigator.geolocation.getCurrentPosition()
2.跨瀏覽器定位
geo-location-javascript庫
延伸：YQL Geo庫
手勢縮放：
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
3.實時顯示地理位置
watchPosition
4.DeviceOrientation事件 # 適用于ios
包括設備移動事件和橫豎屏切換事件
5.使用foursquare定位
Marelle基于jquery和coffeescript
https://praized.github.com/marelle/
包括兩個例子：登錄和簽到
foursquare接口列表
https://developer.foursquare.com/docs/libraries.html
六、移動富媒體
1.移動設備上播放音頻
<audio>
不支持html5的瀏覽器使用polyfills解決
2.移動設備上播放視頻
<video>
不支持html5的使用<boject>
http://diveintohtml5.info/video.html
3.使用離線緩存
使用.appcache
4.使用網絡存儲
web storage # 瀏覽器支持度最高
html5的indexed database api和web sql database
jqueryoffine庫
5.使用web workers
javascript多線程的補充
6.使用session和history api構建類Flash導航效果
七、移動設備調試
1.使用opera dragonfly遠程調試
2.使用weinre遠程調試
3.移動設備上使用firebug
4.使用js console遠程調試
5.配置移動safari調試器
八、服務器端性能調優(yōu)
1.防止移動設備轉碼
.htaccess配置
2.添加移動設備支持的MIME類型
.htaccess配置 # 針對blackberry和Symbian等
3.正確顯示cache manifest # 主要用來做離線應用存儲功能，但是擴展名不能被服務器識別
.htccess配置
4.在頭文件中設置未來過期時間
.htccess配置
5.使用gzip壓縮
.htaccess配置
6.移除etags
.htaccess配置
九、移動性能測試
1.使用blaze的移動設備速度測試
2.在線分析移動頁面速度
google page speed
3.pcap網站性能分析
4.移動版http archive
5.使用jdrop存儲性能數據
十、擁抱移動互聯網特性
1.window.onerror
2.使用ecmascript5中的新方法
3.html5中的新輸入類型
date、datetime、month、time、range
4.HTML中內嵌svg
5.position:fixed
6.overflow:scroll # ios5+
-webkit-overflow-scrolling: touch
————————————————
需要更多編程學習資料? 點贊|+評論學習
