標籤：
1.瀏覽視窗寬頻等於裝置寬度
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
2.禁止數字識別為電話號碼
<meta name="format-detection" content="telephone=no" />
3.禁止安卓識別郵箱
<meta name="format-detection" content="email=no" />
4.移動端頁面基本模板
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>title</title><link rel="stylesheet" href="style.css"></head><body> content</body></html>
其他：
1.取消input在ios下，輸入的時候英文首字母的預設大寫
<input autocapitalize="off" autocorrect="off" />
2.android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
3.旋轉螢幕的事件和樣式
window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("橫屏:" + window.orientation); case 0: case 180: alert("豎屏:" + window.orientation); break; }}
//豎屏時使用的樣式@media all and (orientation:portrait) {.css{}}//橫屏時使用的樣式@media all and (orientation:landscape) {.css{}}
4.audio元素和video元素在ios和andriod中無法自動播放
$(‘html‘).one(‘touchstart‘,function(){ audio.play()})
其他相關：
1.ios7+支援自動播放
2.支援Airplay的裝置（如：音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放視頻不全屏
webkit-playsinline="true"
以上代碼用法如下
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
5.搖一搖功能
//事件監聽if ((window.DeviceMotionEvent) { window.addEventListener(‘devicemotion‘, deviceMotionHandler, false);} else { document.getElementById("dmEvent").innerHTML = "Not supported on your device."}//捕捉重力加速度var acceleration = eventData.accelerationIncludingGravity;//搖一搖demovar SHAKE_THRESHOLD = 800;var last_update = 0;var x, y, z, last_x, last_y, last_z; function deviceMotionHandler(eventData) { var acceleration =eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); if ((curTime - last_update)> 300) { var diffTime = curTime -last_update; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000; if (speed > SHAKE_THRESHOLD) { alert("shaked!"); } last_x = x; last_y = y; last_z = z; }}
參考：http://segmentfault.com/a/1190000003095883
6.手機拍照和上傳圖片
<!-- 選擇照片 --><input type=file accept="image/*"><!-- 選擇視頻 --><input type=file accept="video/*">
使用總結：
7.瀏覽器使用者調整字型大小後頁面矬了，怎麼阻止使用者調整
原因
android側是複寫了layoutinflater 對textview做了統一處理
ios側是修改了body.style.webkitTextSizeAdjust值
解決方案：
android使用以下代碼，該介面只在瀏覽器下有效(感謝jationhuang同學提供)
/** * 頁面加入這段代碼可使Android機器頁面不再受到使用者字型縮放強制改變大小 * 但是會有一個1秒左右的延遲，期間可以考慮通過loading展示 * 僅供參考 */(function(){ if (typeof(WeixinJSBridge) == "undefined") { document.addEventListener("WeixinJSBridgeReady", function (e) { setTimeout(function(){ WeixinJSBridge.invoke(‘setFontSizeCallback‘,{"fontSize":0}, function(res) { alert(JSON.stringify(res)); }); },0); }); } else { setTimeout(function(){ WeixinJSBridge.invoke(‘setFontSizeCallback‘,{"fontSize":0}, function(res) { alert(JSON.stringify(res)); }); },0); }})();
其他bug
android 2.3 bug參考《border-radius 移動之傷》
設計高效能CSS3動畫的幾個要素參考《High Performance Animations》
fixed bug解決方案
參考
《移動端web頁面使用position:fixed問題總結》
《使用iScroll.js解決ios4下不支援position:fixed的問題》
如何阻止windows Phone的預設觸摸事件winphone下預設觸摸事件事件使用e.preventDefault是無效的
目前解決方案是使用樣式來禁用
html{-ms-touch-action: none;}/* 禁止winphone預設觸摸事件 */
參考
《Windows phone 8 touch support》
常用的移動端架構zepto.js文法與jquery幾乎一樣，會jquery基本會zepto~
最新版本已經更新到1.16
官網：http://zeptojs.com/
中文(非官網)：http://www.css88.com/doc/zeptojs_api/
常使用的擴充模組：
瀏覽器檢測：https://github.com/madrobby/zepto/blob/master/src/detect.js
tap事件：https://github.com/madrobby/zepto/blob/master/src/touch.js
iscroll.js解決頁面不支援彈性滾動，不支援fixed引起的問題~
實現下拉重新整理，滑屏，縮放等功能~
最新版本已經更新到5.0
官網：http://cubiq.org/iscroll-5
underscore.js筆者沒用過，不過聽說好用，推薦給大家~
該庫提供了一整套函數式編程的實用功能，但是沒有擴充任何JavaScript內建對象。
最新版本已經更新到1.8.2
官網：http://underscorejs.org/
滑屏架構適合上下滑屏、左右滑屏等滑屏切換頁面的效果
slip.js
iSlider.js
fullpage.js
摘錄原文：http://www.cnblogs.com/PeunZhang/p/3407453.html#question_18
移動端頁面開發總結[摘錄]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
