mobileHack
這里收集了許多移動端上遇到的各種坑與相對解決方案
工具類網(wǎng)站
iphone6的那些事
響應式測試工具
Firefox 瀏覽器內(nèi)置了 自定義設計視圖 的功能品擎，可以通過 Firefox->Web 開發(fā)者->自定義設計視圖（或者摁下 Shift + Ctrl + m ）趁蕊。相比網(wǎng)絡工具凳兵，運行更加流暢，無需聯(lián)網(wǎng)撩幽。
判斷 iPad 和 iPhone 的版本和狀態(tài)的 CSS 媒體查詢代碼
https://quirktools.com/screenfly/
媒體查詢常用樣式表：
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 豎放加載
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"> // 橫放加載
豎屏時使用的樣式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
//橫屏時使用的樣式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>
Web app 開發(fā)的最佳實踐與中文總結(jié)
It’s not a web app. It’s an app you install from the web.
來自maxzhang的一些移動端經(jīng)驗總結(jié)干貨
移動Web單頁應用開發(fā)實踐——頁面結(jié)構(gòu)化
移動Web開發(fā)甥捺，4行代碼檢測瀏覽器是否支持position:fixed
使用border-image實現(xiàn)類似iOS7的1px底邊
移動端web頁面使用position:fixed問題總結(jié)
移動Web開發(fā)實踐——解決position:fixed自適應BUG
本資料很多引用了指尖上的js系列
指尖下的js ——多觸式web前端開發(fā)之一：對于Touch的處理
指尖下的js ——多觸式web前端開發(fā)之二：處理簡單手勢
指尖下的js —— 多觸式web前端開發(fā)之三：處理復雜手勢
基礎(chǔ)知識
meta標簽
meta標簽大全 http://segmentfault.com/blog/ciaocc/1190000002407912
meta標簽淹辞，這些meta標簽在開發(fā)webapp時起到非常重要的作用
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" 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標簽表示：強制讓文檔的寬度與設備的寬度保持1:1牛隅，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽脑蠕；
尤其要注意的是content里多個屬性的設置一定要用分號+空格來隔開购撼，如果不規(guī)范將不會起作用。
注意根據(jù) public_00 提供的資料補充，content 使用分號作為分隔份招，在老的瀏覽器是支持的切揭，但不是規(guī)范寫法。
規(guī)范的寫法應該是使用逗號分隔锁摔，參考 Safari HTML Reference - Supported Meta Tags 和 Android - Supporting Different Screens in Web Apps
其中：
- width - viewport的寬度
- height - viewport的高度
- initial-scale - 初始的縮放比例
- minimum-scale - 允許用戶縮放到的最小比例
- maximum-scale - 允許用戶縮放到的最大比例
- user-scalable - 用戶是否可以手動縮放
第二個meta標簽是iphone設備中的safari私有meta標簽廓旬，它表示：允許全屏模式瀏覽；
第三個meta標簽也是iphone的私有標簽谐腰，它指定的iphone中safari頂端的狀態(tài)條的樣式孕豹；
第四個meta標簽表示：告訴設備忽略將頁面中的數(shù)字識別為電話號碼
在設置了initial-scale=1 之后，我們終于可以以1:1 的比例進行頁面設計了十气。
關(guān)于viewport猜年，還有一個很重要的概念是：iphone 的safari 瀏覽器完全沒有滾動條邑滨，而且不是簡單的“隱藏滾動條”逗堵，
是根本沒有這個功能慷妙。iphone 的safari 瀏覽器實際上從一開始就完整顯示了這個網(wǎng)頁，然后用viewport 查看其中的一部分芹枷。
當你用手指拖動時衅疙，其實拖的不是頁面，而是viewport鸳慈。瀏覽器行為的改變不止是滾動條饱溢，交互事件也跟普通桌面不一樣。
(請參考：指尖的下JS 系列文章)
更詳細的 viewport 相關(guān)的知識也可以參考
移動開發(fā)事件
手勢事件
- touchstart //當手指接觸屏幕時觸發(fā)
- touchmove //當已經(jīng)接觸屏幕的手指開始移動后觸發(fā)
- touchend //當手指離開屏幕時觸發(fā)
- touchcancel
觸摸事件
- gesturestart //當兩個手指接觸屏幕時觸發(fā)
- gesturechange //當兩個手指接觸屏幕后開始移動時觸發(fā)
- gestureend
屏幕旋轉(zhuǎn)事件
- onorientationchange
檢測觸摸屏幕的手指何時改變方向
- orientationchange
touch事件支持的相關(guān)屬性
- touches
- targetTouches
- changedTouches
- clientX // X coordinate of touch relative to the viewport (excludes scroll offset)
- clientY // Y coordinate of touch relative to the viewport (excludes scroll offset)
- screenX // Relative to the screen
- screenY // Relative to the screen
- pageX // Relative to the full page (includes scrolling)
- pageY // Relative to the full page (includes scrolling)
- target // Node the touch event originated from
- identifier // An identifying number, unique to each touch event
- 屏幕旋轉(zhuǎn)事件：onorientationchange
判斷屏幕是否旋轉(zhuǎn)
function orientationChange() {
switch(window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("風景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
};};
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
JS 單擊延遲
click 事件因為要等待單擊確認走芋，會有 300ms 的延遲绩郎，體驗并不是很好。
開發(fā)者大多數(shù)會使用封裝的 tap 事件來代替click 事件翁逞，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成肋杖。
Creating Fast Buttons for Mobile Web Applications
Eliminate 300ms delay on click events in mobile Safari
WebKit CSS:
攜程 UED 整理的 Webkit CSS 文檔 ，全面挖函、方便查詢状植，下面為常用屬性。
①“盒模型”的具體描述性質(zhì)的包圍盒塊內(nèi)容挪圾，包括邊界浅萧，填充等等逐沙。
-webkit-border-bottom-left-radius: radius;
-webkit-border-top-left-radius: horizontal_radius vertical_radius;
-webkit-border-radius: radius; //容器圓角
-webkit-box-sizing: sizing_model; 邊框常量值：border-box/content-box
-webkit-box-shadow: hoff voff blur color; /*容器陰影（參數(shù)分別為：水平X 方向偏移量哲思；垂直Y方向偏移量；高斯模糊半徑值吩案；陰影顏色值）*/
-webkit-margin-bottom-collapse: collapse_behavior; /*常量值：collapse/discard/separate*/
-webkit-margin-start: width;
-webkit-padding-start: width;
-webkit-border-image: url(borderimg.gif) 25 25 25 25 round/stretch round/stretch;
-webkit-appearance: push-button; /*內(nèi)置的CSS 表現(xiàn)棚赔，暫時只支持push-button*/
②“視覺格式化模型”描述性質(zhì)，確定了位置和大小的塊元素。
direction: rtl
unicode-bidi: bidi-override; 常量：bidi-override/embed/normal
③“視覺效果”描述屬性靠益，調(diào)整的視覺效果塊內(nèi)容丧肴，包括溢出行為，調(diào)整行為胧后，能見度芋浮，動畫，變換壳快，和過渡纸巷。
clip: rect(10px, 5px, 10px, 5px)
resize: auto; 常量：auto/both/horizontal/none/vertical
visibility: visible; 常量: collapse/hidden/visible
-webkit-transition: opacity 1s linear; 動畫效果 ease/linear/ease-in/ease-out/ease-in-out
-webkit-backface-visibility: visibler; 常量：visible(默認值)/hidden
-webkit-box-reflect: right 1px; 鏡向反轉(zhuǎn)
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(0.5, transparent), to(white));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));; //CSS 遮罩/蒙板效果
-webkit-mask-attachment: fixed; 常量：fixed/scroll
-webkit-perspective: value; 常量：none(默認)
-webkit-perspective-origin: left top;
-webkit-transform: rotate(5deg);
-webkit-transform-style: preserve-3d; 常量：flat/preserve-3d; (2D 與3D)
④“生成的內(nèi)容，自動編號眶痰，并列出”描述屬性瘤旨，允許您更改內(nèi)容的一個組成部分，創(chuàng)建自動編號的章節(jié)和標題竖伯，和操縱的風格清單的內(nèi)容存哲。
content: “Item” counter(section) ” “;
This resets the counter.
First section
>two section
three section
counter-increment: section 1;
counter-reset: section;
⑤“分頁媒體”描述性能與外觀的屬性，控制印刷版本的網(wǎng)頁七婴，如分頁符的行為祟偷。
page-break-after: auto; 常量：always/auto/avoid/left/right
page-break-before: auto; 常量：always/auto/avoid/left/right
page-break-inside: auto; 常量：auto/avoid
⑥“顏色和背景”描述屬性控制背景下的塊級元素和顏色的文本內(nèi)容的組成部分。
-webkit-background-clip: content; 常量：border/content/padding/text
-webkit-background-origin: padding; 常量：border/content/padding/text
-webkit-background-size: 55px; 常量：length/length_x/length_y
⑦ “字型”的具體描述性質(zhì)的文字字體的選擇范圍內(nèi)的一個因素本姥。報告還描述屬性用于下載字體定義肩袍。
unicode-range: U+00-FF, U+980-9FF;
⑧“文本”描述屬性的特定文字樣式，間距和自動滾屏婚惫。
text-shadow: #00FFFC 10px 10px 5px;
text-transform: capitalize; 常量：capitalize/lowercase/none/uppercase
word-wrap: break-word; 常量：break-word/normal
-webkit-marquee: right large infinite normal 10s; 常量：direction(方向) increment(迭代次數(shù)) repetition(重復) style(樣式) speed(速度);
-webkit-marquee-direction: ahead/auto/backwards/down/forwards/left/reverse/right/up
-webkit-marquee-incrementt: 1-n/infinite(無窮次)
-webkit-marquee-speed: fast/normal/slow
-webkit-marquee-style: alternate/none/scroll/slide
-webkit-text-fill-color: #ff6600; 常量：capitalize, lowercase, none, uppercase
-webkit-text-security: circle; 常量：circle/disc/none/square
-webkit-text-size-adjust: none; 常量:auto/none;
-webkit-text-stroke: 15px #fff;
-webkit-line-break: after-white-space; 常量：normal/after-white-space
-webkit-appearance: caps-lock-indicator;
-webkit-nbsp-mode: space; 常量： normal/space
-webkit-rtl-ordering: logical; 常量：visual/logical
-webkit-user-drag: element; 常量：element/auto/none
-webkit-user-modify: read- only; 常量：read-write-plaintext-only/read-write/read-only
-webkit-user-select: text; 常量：text/auto/none
⑨“表格”描述的布局和設計性能表的具體內(nèi)容氛赐。
-webkit-border-horizontal-spacing: 2px;
-webkit-border-vertical-spacing: 2px;
-webkit-column-break-after: right; 常量：always/auto/avoid/left/right
-webkit-column-break-before: right; 常量：always/auto/avoid/left/right
–webkit-column-break-inside: logical; 常量：avoid/auto
-webkit-column-count: 3; //分欄
-webkit-column-rule: 1px solid #fff;
style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid
⑩“用戶界面”描述屬性，涉及到用戶界面元素在瀏覽器中先舷，如滾動文字區(qū)艰管，滾動條，等等蒋川。報告還描述屬性牲芋，范圍以外的網(wǎng)頁內(nèi)容，如光標的標注樣式和顯示當您按住觸摸觸摸
目標捺球，如在iPhone上的鏈接缸浦。
-webkit-box-align: baseline,center,end,start,stretch 常量：baseline/center/end/start/stretch
-webkit-box-direction: normal;常量：normal/reverse
-webkit-box-flex: flex_valuet
-webkit-box-flex-group: group_number
-webkit-box-lines: multiple; 常量：multiple/single
-webkit-box-ordinal-group: group_number
-webkit-box-orient: block-axis; 常量：block-axis/horizontal/inline-axis/vertical/orientation
–webkit-box-pack: alignment; 常量：center/end/justify/start
動畫過渡
這是 Webkit 中最具創(chuàng)新力的特性：使用過渡函數(shù)定義動畫。
-webkit-animation: title infinite ease-in-out 3s;
animation 有這幾個屬性：
-webkit-animation-name： //屬性名氮兵，就是我們定義的keyframes
-webkit-animation-duration：3s //持續(xù)時間
-webkit-animation-timing-function： //過渡類型：ease/ linear(線性) /ease-in(慢到快)/ease-out(快到慢) /ease-in-out(慢到快再到慢) /cubic-bezier
-webkit-animation-delay：10ms //動畫延遲(默認0)
-webkit-animation-iteration-count： //循環(huán)次數(shù)(默認1)裂逐，infinite 為無限
-webkit-animation-direction： //動畫方式：normal(默認 正向播放)； alternate(交替方向泣栈，第偶數(shù)次正向播放卜高，第奇數(shù)次反向播放)
這些同樣是可以簡寫的弥姻。但真正讓我覺的很爽的是keyframes，它能定義一個動畫的轉(zhuǎn)變過程供調(diào)用掺涛，過程為0%到100%或from(0%)到to(100%)庭敦。簡單點說，只要你有想法薪缆，你想讓元素在這個過程中以什么樣的方式改變都是很簡單的秧廉。
-webkit-transform: 類型（縮放scale/旋轉(zhuǎn)rotate/傾斜skew/位移translate）
scale(num,num) 放大倍率。scaleX 和 scaleY(3)拣帽，可以簡寫為：scale(* , *)
rotate(*deg) 轉(zhuǎn)動角度定血。rotateX 和 rotateY，可以簡寫為：rotate(* , *)
Skew(*deg) 傾斜角度诞外。skewX 和skewY澜沟，可簡寫為：skew(* , *)
translate(*,*) 坐標移動。translateX 和translateY峡谊，可簡寫為：translate(* , *)茫虽。
頁面描述
<link rel="apple-touch-icon-precomposed" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" />
這個屬性是當用戶把連接保存到手機桌面時使用的圖標，如果不設置既们，則會用網(wǎng)頁的截圖濒析。有了這，就可以讓你的網(wǎng)頁像APP一樣存在手機里了
<link rel="apple-touch-startup-image" href="/img/startup.png" />
這個是APP啟動畫面圖片啥纸，用途和上面的類似号杏，如果不設置，啟動畫面就是白屏斯棒，圖片像素就是手機全屏的像素
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
這個描述是表示打開的web app的最上面的時間盾致、信號欄是黑色的，當然也可以設置其它參數(shù)荣暮，詳細參數(shù)說明請參照：Safari HTML Reference - Supported Meta Tags
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
常見的 iPhone 和 Android 屏幕參數(shù)庭惜。
- 設備 分辨率 設備像素比率
- Android LDPI 320×240 0.75
- Iphone 3 & Android MDPI 320×480 1
- Android HDPI 480×800 1.5
- Iphone 4 960×640 2.0
iPhone 4的一個 CSS 像素實際上表現(xiàn)為一塊 2×2 的像素。所以圖片像是被放大2倍一樣穗酥，模糊不清晰护赊。
解決辦法：
1、頁面引用
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="retina.css" />
2砾跃、CSS文件里
#header {
background:url(mdpi/bg.png);
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {
/*CSS for high-density screens*/
#header {
background:url(hdpi/bg.png);
}
}
移動 Web 開發(fā)經(jīng)驗技巧
點擊與click事件
對于a標記的點擊導航骏啰，默認是在onclick事件中處理的。而移動客戶端對onclick的響應相比PC瀏覽器有著明顯的幾百毫秒延遲抽高。
在移動瀏覽器中對觸摸事件的響應順序應當是：
ontouchstart -> ontouchmove -> ontouchend -> onclick
因此判耕，如果確實要加快對點擊事件的響應，就應當綁定ontouchend事件厨内。
使用click會出現(xiàn)綁定點擊區(qū)域閃一下的情況祈秕，解決：給該元素一個樣式如下
-webkit-tap-highlight-color: rgba(0,0,0,0);
如果不使用click，也不能簡單的用touchstart或touchend替代雏胃，需要用touchstart的模擬一個click事件请毛，并且不能發(fā)生touchmove事件，或者用zepto中的tap（輕擊）事件瞭亮。
body
{
-webkit-overflow-scrolling: touch;
}
用iphone或ipad瀏覽很長的網(wǎng)頁滾動時的滑動效果很不錯吧方仿？不過如果是一個div，然后設置 height:200px;overflow:auto;的話统翩，可以滾動但是完全沒有那滑動效果仙蚜，很郁悶吧？
我看到很多網(wǎng)站為了實現(xiàn)這一效果厂汗，用了第三方類庫委粉，最常用的是iscroll（包括新浪手機頁，百度等）
我一開始也使用娶桦，不過自從用了-webkit-overflow-scrolling: touch;樣式后贾节，就完全可以拋棄第三方類庫了，把它加在body{}區(qū)域衷畦，所有的overflow需要滾動的都可以生效了栗涂。
另外有一篇比較全的移動端點擊解決方案 http://www.zhihu.com/question/28979857
鎖定 viewport
ontouchmove="event.preventDefault()" //鎖定viewport，任何屏幕操作不移動用戶界面（彈出鍵盤除外）祈争。
利用 Media Query監(jiān)聽
Media Query 相信大部分人已經(jīng)使用過了斤程。其實 JavaScript可以配合 Media Query這么用：
var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql);
function handleOrientationChange(mql) {
if (mql.matches) {
alert('The device is currently in portrait orientation ')
} else {
alert('The device is currently in landscape orientation')
}}
借助了 Media Query 接口做的事件監(jiān)聽，所以很強大菩混！
也可以通過獲取 CSS 值來使用 Media Query 判斷設備情況忿墅，詳情請看：JavaScript 依據(jù) CSS Media Queries 判斷設備的方法。
rem最佳實踐
rem是非常好用的一個屬性沮峡，可以根據(jù)html來設定基準值球匕，而且兼容性也很不錯。不過有的時候還是需要對一些莫名其妙的瀏覽器優(yōu)雅降級帖烘。以下是兩個實踐
- http://jsbin.com/vaqexuge/4/edit 這有個demo亮曹，發(fā)現(xiàn)chrome當font-size小于12時，rem會按照12來計算秘症。因此設置基準值要考慮這一點
- 可以用以下的代碼片段保證在低端瀏覽器下也不會出問題
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
被點擊元素的外觀變化照卦，可以使用樣式來設定：
-webkit-tap-highlight-color: 顏色
檢測判斷 iPhone/iPod
開發(fā)特定設備的移動網(wǎng)站，首先要做的就是設備偵測了乡摹。下面是使用Javascript偵測iPhone/iPod的UA役耕，然后轉(zhuǎn)向到專屬的URL。
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.example.com";
}
}
雖然Javascript是可以在水果設備上運行的聪廉，但是用戶還是可以禁用瞬痘。它也會造成客戶端刷新和額外的數(shù)據(jù)傳輸故慈，所以下面是服務器端偵測和轉(zhuǎn)向：
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
header('Location: http://yoursite.com/iphone');
exit();
}
阻止旋轉(zhuǎn)屏幕時自動調(diào)整字體大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
模擬:hover偽類
因為iPhone并沒有鼠標指針，所以沒有hover事件框全。那么CSS :hover偽類就沒用了察绷。但是iPhone有Touch事件，onTouchStart 類似 onMouseOver津辩，onTouchEnd 類似 onMouseOut拆撼。所以我們可以用它來模擬hover。使用Javascript：
var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);
myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);
}
然后用CSS增加hover效果：
a:hover, a.hover { /* 你的hover效果 */ }
這樣設計一個鏈接喘沿，感覺可以更像按鈕闸度。并且，這個模擬可以用在任何元素上蚜印。
Flexbox 布局
http://www.w3.org/TR/css3-flexbox/
居中問題
居中是移動端跟pc端共同的噩夢莺禁。這里有兩種兼容性比較好的新方案。
-
table布局法
.box{
text-align:center;
display:table-cell;
vertical-align:middle;
} -
老版本flex布局法
.box{
display:-webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
text-align:center;
}
以上兩種其實分別是retchat跟ionic的布局基石窄赋。
這里有更詳細的更多的選擇http://www.zhouwenbin.com/%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E6%B3%95/ 來自周文彬的博客
移動端實現(xiàn)標題文字截斷
http://www.75team.com/archives/611
處理 Retina 雙倍屏幕
（經(jīng)典）Using CSS Sprites to optimize your website for Retina Displays
使用CSS3的background-size優(yōu)化蘋果的Retina屏幕的圖像顯示
使用 CSS sprites 來優(yōu)化你的網(wǎng)站在 Retina 屏幕下顯示
（案例）CSS IMAGE SPRITES FOR RETINA (HIRES) DEVICES
input類型為date情況下不支持placeholder（來自于江水）
這其實是瀏覽器自己的處理睁宰。因為瀏覽器會針對此類型 input 增加 datepicker 模塊。
對 input type date 使用 placeholder 的目的是為了讓用戶更準確的輸入日期格式寝凌，iOS 上會有 datepicker 不會顯示 placeholder 文字柒傻，但是為了統(tǒng)一表單外觀，往往需要顯示较木。Android 部分機型沒有 datepicker 也不會顯示 placeholder 文字红符。
桌面端（Mac）
- Safari 不支持 datepicker，placeholder 正常顯示伐债。
- Firefox 不支持 datepicker预侯，placeholder 正常顯示。
- Chrome 支持 datepicker峰锁，顯示 年萎馅、月、日 格式虹蒋，忽略 placeholder糜芳。
移動端
- iPhone5 iOS7 有 datepicker 功能，但是不顯示 placeholder魄衅。
- Andorid 4.0.4 無 datepicker 功能峭竣，不顯示 placeholder
解決方法：
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">
因為text是支持placeholder的。因此當用戶focus的時候自動把type類型改變?yōu)閐ate晃虫，這樣既有placeholder也有datepicker了
判斷照片的橫豎排列
有這樣一種需求皆撩，需要判斷用戶照片是橫著拍出來的還是豎著拍出來的，這里需要使用照片得exif信息：
$("input").change(function() {
var file = this.files[0];
fr = new FileReader;
fr.onloadend = function() {
var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
alert(exif.Orientation);
};
fr.readAsBinaryString(file);
});
可以使用這兩個庫 來取exif信息http://www.nihilogic.dk/labs/binaryajax/binaryajax.js http://www.nihilogic.dk/labs/exif/exif.js
Android上當viewport的width大于device-width時出現(xiàn)文字無故折行的解決辦法
http://www.iunbug.com/archives/2013/04/23/798.html
白屏解決與優(yōu)化方案
當前很多無線頁面都使用前端模板進行數(shù)據(jù)渲染哲银，那么在糟糕的網(wǎng)速情況下扛吞，一進去頁面呻惕，看到的不是白屏就是 loading，這成為白屏問題滥比。
此問題發(fā)生的原因基本可以歸結(jié)為網(wǎng)速跟靜態(tài)資源
1亚脆、css文件加載需要一些時間，在加載的過程中頁面是空白的守呜。 解決：可以考慮將css代碼前置和內(nèi)聯(lián)。
2山憨、首屏無實際的數(shù)據(jù)內(nèi)容查乒，等待異步加載數(shù)據(jù)再渲染頁面導致白屏。 解決：在首屏直接同步渲染html郁竟，后續(xù)的滾屏等再采用異步請求數(shù)據(jù)和渲染html玛迄。
3、首屏內(nèi)聯(lián)js的執(zhí)行會阻塞頁面的渲染棚亩。 解決：盡量不在首屏html代碼中放置內(nèi)聯(lián)腳本蓖议。（來自翔歌）
解決方案
根本原因是客戶端渲染的無力，因此最簡單的方法是在服務器端讥蟆，使用模板引擎渲染所有頁面勒虾。同時
1減少文件加載體積，如html壓縮瘸彤，js壓縮
2加快js執(zhí)行速度 比如常見的無限滾動的頁面修然，可以使用js先渲染一個屏幕范圍內(nèi)的東西
3提供一些友好的交互，比如提供一些假的滾動條
4使用本地存儲處理靜態(tài)文件质况。
如何實現(xiàn)打開已安裝的app愕宋，若未安裝則引導用戶安裝?
來自 http://gallery.kissyui.com/redirectToNative/1.2/guide/index.html kissy mobile
通過iframe src發(fā)送請求打開app自定義url scheme，如taobao://home（淘寶首頁） 结榄、etao://scan（一淘掃描）);
如果安裝了客戶端則會直接喚起中贝，直接喚起后，之前瀏覽器窗口（或者掃碼工具的webview）推入后臺臼朗；
如果在指定的時間內(nèi)客戶端沒有被喚起邻寿，則js重定向到app下載地址。
大概實現(xiàn)代碼如下
goToNative:function(){
if(!body) {
setTimeout(function(){
doc.body.appendChild(iframe);
}, 0);
} else {
body.appendChild(iframe);
}
setTimeout(function() {
doc.body.removeChild(iframe);
gotoDownload(startTime);//去下載视哑，下載鏈接一般是itunes app store或者apk文件鏈接
/**
* 測試時間設置小于800ms時老厌，在android下的UC瀏覽器會打開native app時并下載apk，
* 測試android+UC下打開native的時間最好大于800ms;
*/
}, 800);
}
需要注意的是 如果是android chrome 25版本以后黎炉，在iframe src不會發(fā)送請求枝秤，
原因如下https://developers.google.com/chrome/mobile/docs/intents ，通過location href使用intent機制拉起客戶端可行并且當前頁面不跳轉(zhuǎn)慷嗜。
window.location = 'intent://' + schemeUrl + '#Intent;scheme=' + scheme + ';package=' + self.package + ';end';
補充一個來自三水清的詳細講解 http://js8.in/2013/12/16/ios%E4%BD%BF%E7%94%A8schema%E5%8D%8F%E8%AE%AE%E8%B0%83%E8%B5%B7app/
active的兼容(來自薛端陽)
今天發(fā)現(xiàn)淀弹，要讓a鏈接的CSS active偽類生效丹壕，只需要給這個a鏈接的touch系列的任意事件touchstart/touchend綁定一個空的匿名方法即可hack成功
<style>
a {
color: #000;
}
a:active {
color: #fff;
}
</style>
<a herf=”asdasd”>asdasd</a>
<script>
var a=document.getElementsByTagName(‘a(chǎn)’);
for(var i=0;i<a.length;i++){
a[i].addEventListener(‘touchstart’,function(){},false);
}
</script>
消除transition閃屏
兩個方法：使用css3動畫的時盡量利用3D加速，從而使得動畫變得流暢薇溃。動畫過程中的動畫閃白可以通過 backface-visibility 隱藏菌赖。
-webkit-transform-style: preserve-3d;
/*設置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D*/
-webkit-backface-visibility: hidden;
/*（設置進行轉(zhuǎn)換的元素的背面在面對用戶時是否可見：隱藏）*/
測試是否支持svg圖片
document.implementation.hasFeature("http:// www.w3.org/TR/SVG11/feature#Image", "1.1")
考慮兼容“隱私模式”(from http://blog.youyo.name/archives/smarty-phones-webapp-deverlop-advance.html)
ios的safari提供一種“隱私模式”，如果你的webapp考慮兼容這個模式沐序，那么在使用html5的本地存儲的一種————localStorage時琉用，可能因為“隱私模式”下沒有權(quán)限讀寫localstorge而使代碼拋出錯誤，導致后續(xù)的js代碼都無法運行了策幼。
既然在safari的“隱私模式”下邑时，沒有調(diào)用localStorage的權(quán)限，首先想到的是先判斷是否支持localStorage特姐，代碼如下：
if('localStorage' in window){
//需要使用localStorage的代碼寫在這
}else{
//不支持的提示和向下兼容代碼
}
測試發(fā)現(xiàn)晶丘，即使在safari的“隱私模式”下，’localStorage’ in window的返回值依然為true唐含，也就是說浅浮，if代碼塊內(nèi)部的代碼依然會運行，問題沒有得到解決捷枯。
接下來只能相當使用try catch了滚秩，雖然這是一個不太推薦被使用的方法，使用try catch捕獲錯誤淮捆，使后續(xù)的js代碼可以繼續(xù)運行叔遂，代碼如下：
try{
if('localStorage' in window){
//需要使用localStorage的代碼寫在這
}else{
//不支持的提示和向下兼容代碼
}
}catch(e){
// 隱私模式相關(guān)提示代碼和不支持的提示和向下兼容代碼
}
所以，提醒大家注意争剿，在需要兼容ios的safari的“隱私模式”的情況下已艰，本地存儲相關(guān)的代碼需要使用try catch包裹并降級兼容。
安卓手機點擊鎖定頁面效果問題
有些安卓手機蚕苇，頁面點擊時會停止頁面的javascript哩掺，css3動畫等的執(zhí)行，這個比較蛋疼涩笤。不過可以用阻止默認事件解決嚼吞。詳細見
http://stackoverflow.com/questions/10246305/android-browser-touch-events-stop-display-being-updated-inc-canvas-elements-h
function touchHandlerDummy(e)
{
e.preventDefault();
return false;
}
document.addEventListener("touchstart", touchHandlerDummy, false);
document.addEventListener("touchmove", touchHandlerDummy, false);
document.addEventListener("touchend", touchHandlerDummy, false);
消除ie10里面的那個叉號
input:-ms-clear{display:none;}
關(guān)于ios與os端字體的優(yōu)化(橫豎屏會出現(xiàn)字體加粗不一致等)
UIWebView font is thinner in portrait than landscape
判斷用戶是否是“將網(wǎng)頁添加到主屏后，再從主屏幕打開這個網(wǎng)頁”的
navigator.standalone
隱藏地址欄 & 處理事件的時候蹬碧，防止?jié)L動條出現(xiàn)：
// 隱藏地址欄 & 處理事件的時候 舱禽，防止?jié)L動條出現(xiàn)
addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});
ios7 可以通過meta標簽的minimal來隱藏地址欄了
http://darkblue.sdf.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html
判斷是否為iPhone：
// 判斷是否為 iPhone ：
function isAppleMobile() {
return (navigator.platform.indexOf('iPhone') != -1);
};
localStorage:
var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名稱是 n 的數(shù)據(jù)存在 ，則將其讀出 恩沽，賦予變量 v 誊稚。
localStorage.setItem('n', v); // 寫入名稱為 n、值為 v 的數(shù)據(jù)
localStorage.removeItem('n'); // 刪除名稱為 n 的數(shù)據(jù)
使用特殊鏈接：
如果你關(guān)閉自動識別后 ，又希望某些電話號碼能夠鏈接到 iPhone 的撥號功能 里伯，那么可以通過這樣來聲明電話鏈接 ,
<a href="tel:12345654321">打電話給我</a>
<a href="sms:12345654321">發(fā)短信</a>
或用于單元格：
<td onclick="location.href='tel:122'">
自動大寫與自動修正
要關(guān)閉這兩項功能城瞎，可以通過autocapitalize 與autocorrect 這兩個選項：
<input type="text" autocapitalize="off" autocorrect="off" />
不讓 Android 識別郵箱
<meta content="email=no" name="format-detection" />
禁止 iOS 彈出各種操作窗口
-webkit-touch-callout:none
禁止用戶選中文字
-webkit-user-select:none
動畫效果中，使用 translate 比使用定位性能高
Why Moving Elements With Translate() Is Better Than Pos:abs Top/left
拿到滾動條
window.scrollY
window.scrollX
比如要綁定一個touchmove的事件疾瓮，正常的情況下類似這樣(來自呼吸二氧化碳)
$('div').on('touchmove', function(){
//.….code
{});
而如果中間的code需要處理的東西多的話脖镀，fps就會下降影響程序順滑度，而如果改成這樣
$('div').on('touchmove', function(){
setTimeout(function(){
//.….code
},0);
{});
把代碼放在setTimeout中狼电，會發(fā)現(xiàn)程序變快.
關(guān)于 iOS 系統(tǒng)中蜒灰，Web APP 啟動圖片在不同設備上的適應性設置
position:sticky與position:fixed布局
http://www.zhouwenbin.com/positionsticky-%E7%B2%98%E6%80%A7%E5%B8%83%E5%B1%80/
http://www.zhouwenbin.com/sticky%E6%A8%A1%E6%8B%9F%E9%97%AE%E9%A2%98/
關(guān)于 iOS 系統(tǒng)中，中文輸入法輸入英文時肩碟，字母之間可能會出現(xiàn)一個六分之一空格
可以通過正則去掉
this.value = this.value.replace(/\u2006/g, '');
關(guān)于android webview中强窖，input元素輸入時出現(xiàn)的怪異情況
見下圖
[圖片上傳失敗...(image-996344-1514534234467)]
Android Web 視圖,至少在 HTC EVO 和三星的 Galaxy Nexus 中，文本輸入框在輸入時表現(xiàn)的就像占位符腾务。情況為一個類似水印的東西在用戶輸入?yún)^(qū)域毕骡，一旦用戶開始輸入便會消失(見圖片)削饵。
在 Android 的默認樣式下當輸入框獲得焦點后岩瘦，若存在一個絕對定位或者 fixed 的元素，布局會被破壞窿撬，其他元素與系統(tǒng)輸入字段會發(fā)生重疊(如搜索圖標將消失為搜索字段)启昧，可以觀察到布局與原始輸入字段有偏差(見截圖)。
這是一個相當復雜的問題劈伴，以下簡單布局可以重現(xiàn)這個問題:
<label for="phone">Phone: *</label>
<input type="tel" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />
解決方法
-webkit-user-modify: read-write-plaintext-only
詳細參考http://www.bielousov.com/2012/android-label-text-appears-in-input-field-as-a-placeholder/
注意密末，該屬性會導致中文不能輸入詞組，只能單個字跛璧。感謝鬼哥與飛（游勇飛）貢獻此問題與解決方案
另外严里，在position:fixed后的元素里，盡量不要使用輸入框追城。更多的bug可參考
http://www.cosdiv.com/page/M0/S882/882353.html
依舊無法解決（摩托羅拉ME863手機）刹碾，則使用input:text類型而非password類型，并設置其設置 -webkit-text-security: disc; 隱藏輸入密碼從而解決座柱。
JS動態(tài)生成的select下拉菜單在Android2.x版本的默認瀏覽器里不起作用
解決方法刪除了overflow-x:hidden; 然后在JS生成下來菜單之后focus聚焦迷帜，這兩步操作之后解決了問題。(來自島都-小Qi)
Andriod 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
IE10 的特殊鼠標事件
iOS 輸入框最佳實踐
Mobile-friendly input of a digits + spaces string (a credit card number)
HTML5 input type number vs tel
iPhone: numeric keyboard for text input
Text Programming Guide for iOS - Managing the Keyboard
HTML5 inputs and attribute support
往返緩存問題
點擊瀏覽器的回退色洞，有時候不會自動執(zhí)行js戏锹，特別是在mobilesafari中。這與往返緩存(bfcache)有關(guān)系火诸。有很多hack的處理方法锦针，可以參考
http://stackoverflow.com/questions/24046/the-safari-back-button-problem
http://stackoverflow.com/questions/11979156/mobile-safari-back-button
不暫停的計時器（safari的進程凍結(jié)）
https://www.imququ.com/post/ios-none-freeze-timer.html
或者可以用postmessage方式:
主頁面:
// 解決ios safari tab在后臺會遭遇進程凍結(jié)問題
// http://www.apple.com/safari/#gallery-icloud-tabs
// Safari takes advantage of power-saving technologies such as App Nap, which puts background Safari tabs into a low-power state until you start using them again. In addition, Safari Power Saver conserves battery life by intelligently pausing web videos and other plug?in content when they’re not front and center on the web pages you visit. All told, Safari on OS X Mavericks lets you browse up to an hour longer than with Chrome or Firefox.1
var work;
function startWorker() {
if (typeof(Worker) !== "undefined") {
if (typeof(work) == "undefined") {
work = new Worker("/workers.js");
}
work.onmessage = function(event) {
// document.getElementById("result-count").innerHTML = event.data.count;
// document.getElementById("result-url").innerHTML = event.data.targetURL;
if (target && event.data.targetURL != "") target.location.href = event.data.targetURL;
};
} else {
console.log('does not support Web Workers...');
}
}
function stopWorker() {
work.terminate();
}
startWorker();
worker:
// 解決ios safari tab在后臺會遭遇進程凍結(jié)問題
// http://www.apple.com/safari/#gallery-icloud-tabs
// Safari takes advantage of power-saving technologies such as App Nap, which puts background Safari tabs into a low-power state until you start using them again. In addition, Safari Power Saver conserves battery life by intelligently pausing web videos and other plug?in content when they’re not front and center on the web pages you visit. All told, Safari on OS X Mavericks lets you browse up to an hour longer than with Chrome or Firefox.1
importScripts('/socket.io/socket.io.js');
var count = 0,
targetURL = ''
;
var socket = io.connect('/');
socket.on('navigate', function (data) {
count = count++;
postMessage({targetURL:data.url,count:count});
});
Web移動端Fixed布局的解決方案
http://efe.baidu.com/blog/mobile-fixed-layout/
ios上background-attachment:fixed不能正常工作
參考 http://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7
如何讓音頻跟視頻在ios跟android上自動播放
<audio autoplay ><source src="audio/alarm1.mp3" type="audio/mpeg"></audio>
系統(tǒng)默認情況下 audio的autoplay屬性是無法生效的，這也是手機為節(jié)省用戶流量做的考慮。
如果必須要自動播放伞插，有兩種方式可以解決割粮。
1.捕捉一次用戶輸入后，讓音頻加載媚污，下次即可播放舀瓢。
//play and pause it once
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
這種方法需要捕獲一次用戶的點擊事件來促使音頻跟視頻加載。當加載后耗美，你就可以用javascript控制音頻的播放了京髓，如調(diào)用audio.play()
2.利用iframe加載資源
var ifr=document.createElement("iframe");
ifr.setAttribute('src', "http://mysite.com/myvideo.mp4");
ifr.setAttribute('width', '1px');
ifr.setAttribute('height', '1px');
ifr.setAttribute('scrolling', 'no');
ifr.style.border="0px";
document.body.appendChild(ifr);
這種方式其實跟第一種原理是一樣的。當資源加載了你就可以控制播放了商架，但是這里使用iframe來加載堰怨，相當于直接觸發(fā)資源加載。
注意蛇摸，使用創(chuàng)建audio標簽并讓其加載的方式是不可行的伪嫁。
慎用這種方法虫蝶，會對用戶造成很糟糕的影響。。
iOS 6 跟 iPhone 5 的那些事
IP5 的媒體查詢
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5 or iPod Touch 5th generation */
}
使用媒體查詢砰奕，提供不同的啟動圖片：
<link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)">
<link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">
拍照上傳
<input type=file accept="video/*">
<input type=file accept="image/*">
不支持其他類型的文件 橡娄，如音頻坯认，Pages文檔或PDF文件卷中。 也沒有g(shù)etUserMedia攝像頭的實時流媒體支持。
可以使用的 HTML5 高級 api
- multipart POST 表單提交上傳
- XMLHttpRequest 2 AJAX 上傳（甚至進度支持）
- 文件 API 敬辣，在 iOS 6 允許 JavaScript 直接讀取的字節(jié)數(shù)和客戶端操作文件雪标。
智能應用程序橫幅
有了智能應用程序橫幅，當網(wǎng)站上有一個相關(guān)聯(lián)的本機應用程序時溉跃，Safari瀏覽器可以顯示一個橫幅村刨。 如果用戶沒有安裝這個應用程序?qū)@示“安裝”按鈕，或已經(jīng)安裝的顯示“查看”按鈕可打開它撰茎。
在 iTunes Link Maker 搜索我們的應用程序和應用程序ID嵌牺。
<meta name="apple-itunes-app" content="app-id=9999999">
可以使用 app-argument 提供字符串值，如果參加iTunes聯(lián)盟計劃乾吻，可以添加元標記數(shù)據(jù)
<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx">
<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx, affiliate-data=partnerId=99&siteID=XXXX">
橫幅需要156像素（設備是312 hi-dpi）在頂部髓梅，直到用戶在下方點擊內(nèi)容或關(guān)閉按鈕，你的網(wǎng)站才會展現(xiàn)全部的高度绎签。 它就像HTML的DOM對象枯饿，但它不是一個真正的DOM。
CSS3 濾鏡
-webkit-filter: blur(5px) grayscale (.5) opacity(0.66) hue-rotate(100deg);
交叉淡變
background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%);
Safari中的全屏幕
除了chrome-less 主屏幕meta標簽诡必，現(xiàn)在的iPhone和iPod Touch（而不是在iPad）支持全屏幕模式的窗口奢方。 沒有辦法強制全屏模式搔扁，它需要由用戶啟動（工具欄上的最后一個圖標）。需要引導用戶按下屏幕上的全屏圖標來激活全屏效果蟋字。 可以使用onresize事件檢測是否用戶切換到全屏幕稿蹲。
支持requestAnimationFrameAPI
支持image-set,retina屏幕的利器
-webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x)
應用程序緩存限制增加至25MB。
Web View（pseudobrowsers鹊奖，PhoneGap/Cordova應用程序苛聘，嵌入式瀏覽器） 上Javascript運行比Safari慢3.3倍（或者說，Nitro引擎在Safari瀏覽器是Web應用程序是3.3倍速度）忠聚。
autocomplete屬性的輸入遵循DOM規(guī)范
來自DOM4的Mutation Observers已經(jīng)實現(xiàn)设哗。 您可以使用WebKitMutationObserver構(gòu)造器捕獲DOM的變化
Safari不再總是對用 -webkit-transform:preserve-3d 的元素創(chuàng)建硬件加速
支持window.selection 的Selection API
Canvas更新 ：createImageData有一個參數(shù)，現(xiàn)在有兩個新的功能做好準備两蟀，用webkitGetImageDataHD和webkitPutImageDataHD提供高分辨率圖像 网梢。
更新SVG處理器和事件構(gòu)造函數(shù)
IOS7的大更新
iOS 7 的 Safari 和 HTML5：問題，變化和新 API(張金龍翻譯)
webview相關(guān)
Cache開啟和設置
browser.getSettings().setAppCacheEnabled(true);
browser.getSettings().setAppCachePath("/data/data/[com.packagename]/cache");
browser.getSettings().setAppCacheMaxSize(5*1024*1024); // 5MB
LocalStorage相關(guān)設置
browser.getSettings().setDatabaseEnabled(true);
browser.getSettings().setDomStorageEnabled(true);
String databasePath = browser.getContext().getDir("databases", Context.MODE_PRIVATE).getPath();
browser.getSettings().setDatabasePath(databasePath);//Android webview的LocalStorage有個問題赂毯，關(guān)閉APP或者重啟后战虏，就清楚了，所以需要browser.getSettings().setDatabase相關(guān)的操作党涕，把LocalStoarge存到DB中
myWebView.setWebChromeClient(new WebChromeClient(){
@Override
public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater)
{
quotaUpdater.updateQuota(estimatedSize * 2);
}
}
瀏覽器自帶縮放按鈕取消顯示
browser.getSettings().setBuiltInZoomControls(false);
幾個比較好的實踐
使用localstorage緩存html
使用lazyload烦感，還要記得lazyload占位圖雖然小，但是最好能提前加載到緩存
延時加載執(zhí)行js
主要原因就在于Android Webview的onPageFinished事件遣鼓，Android端一般是用這個事件來標識頁面加載完成并顯示的啸盏，也就是說在此之前重贺，會一直loading骑祟，但是Android的OnPageFinished事件會在Javascript腳本執(zhí)行完成之后才會觸發(fā)。如果在頁面中使用JQuery气笙，會在處理完DOM對象次企，執(zhí)行完$(document).ready(function() {});事件自會后才會渲染并顯示頁面。
manifest與緩存相關(guān):
http://www.alloyteam.com/2013/12/web-cache-6-hybrid-app-tailored-cache/
相關(guān)解決方案
http://mt.tencent.com/
移動端調(diào)適篇
手機抓包與配host
在PC上潜圃，我們可以很方便地配host缸棵，但是手機上如何配host，這是一個問題谭期。
這里主要使用fiddler和遠程代理堵第，實現(xiàn)手機配host的操作，具體操作如下：
首先隧出，保證PC和移動設備在同一個局域網(wǎng)下踏志；
PC上開啟fiddler，并在設置中勾選“allow remote computers to connect”
首先胀瞪，保證PC和移動設備在同一個局域網(wǎng)下针余；
PC上開啟fiddler，并在設置中勾選“allow remote computers to connect”
[圖片上傳失敗...(image-84443d-1514534234467)]手機上設置代理，代理IP為PC的IP地址圆雁，端口為8888（這是fiddler的默認端口）忍级。通常手機上可以直接設置代理，如果沒有伪朽，可以去下載一個叫ProxyDroid的APP來實現(xiàn)代理的設置轴咱。
此時你會發(fā)現(xiàn)，用手機上網(wǎng)烈涮，走的其實是PC上的fiddler嗦玖，所有的請求包都會在fiddler中列出來，配合willow使用跃脊，即可實現(xiàn)配host宇挫，甚至是反向代理的操作。
也可以用CCProxy之類軟件酪术，還有一種方法就是買一個隨身wifi器瘪，然后手機連接就可以了！
高級抓包
iPhone上使用Burp Suite捕捉HTTPS通信包方法
mobile app 通信分析方法小議（iOS/Android)
實時抓取移動設備上的通信包(ADVsock2pipe+Wireshark+nc+tcpdump)
靜態(tài)資源緩存問題
一般用代理軟件代理過來的靜態(tài)資源可以設置nocache避免緩存绘雁，但是有的手機比較詭異橡疼，會一直緩存住css等資源文件。由于靜態(tài)資源一般都是用版本號管理的庐舟，我們以charles為例子來處理這個問題
charles 選擇靜態(tài)的html頁面文件-saveResponse欣除。之后把這個文件保存一下，修改一下版本號挪略。之后繼續(xù)發(fā)請求历帚，
剛才的html頁面文件 右鍵選擇 --map local 選擇我們修改過版本號的html文件即ok。這其實也是fiddler遠程映射并修改文件的一個應用場景杠娱。
安卓模擬器和真機區(qū)別
http://testerhome.com/topics/388
http://www.cnblogs.com/zdz8207/archive/2012/01/30/2332436.html
移動瀏覽器篇
微信瀏覽器
微信瀏覽器的各種bug匯總 （x5內(nèi)核） http://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/
因為微信瀏覽器屏蔽了一部分鏈接圖片挽牢，所以需要引導用戶去打開新頁面，可以用以下方式判斷微信瀏覽器的ua
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
后端判斷也很簡單摊求，比如php
function is_weixin(){
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false ) {
return true;
}
return false;
}
https://github.com/maxzhang/maxzhang.github.com/issues/31 微信瀏覽器踩坑禽拔，來自maxZhang https://github.com/maxzhang
【UC瀏覽器】video標簽脫離文檔流
場景：<video>標簽的父元素(祖輩元素)設置transform樣式后，<video>標簽會脫離文檔流室叉。
測試環(huán)境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。
Demo：http://t.cn/zj3xiyu
解決方案：不使用transform屬性茧痕。translate用top野来、margin等屬性替代。
【UC瀏覽器】video標簽總在最前
場景：<video>標簽總是在最前（可以理解為video標簽的z-index屬性是Max）凿渊。
測試環(huán)境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 梁只。
【UC瀏覽器】position:fixed 屬性在UC瀏覽器的奇葩現(xiàn)象
場景：設置了position: fixed 的元素會遮擋z-index值更高的同輩元素缚柳。
在8.6的版本,這個情況直接出現(xiàn)。
在8.7之后的版本,當同輩元素的height大于713這個「神奇」的數(shù)值時,才會被遮擋搪锣。
測試環(huán)境：UC瀏覽器 8.8_beta/8.7/8.6 + Android 2.3/4.0 秋忙。
Demo：http://t.cn/zYLTSg6
【QQ手機瀏覽器】不支持HttpOnly
場景：帶有HttpOnly屬性的Cookie，在QQ手機瀏覽器版本從4.0開始失效构舟。JavaScript可以直接讀取設置了HttpOnly的Cookie值灰追。
測試環(huán)境：QQ手機瀏覽器 4.0/4.1/4.2 + Android 4.0 。
【MIUI原生瀏覽器】瀏覽器地址欄hash不改變
場景：location.hash 被賦值后狗超，地址欄的地址不會改變弹澎。
但實際上 location.href 已經(jīng)更新了，通過JavaScript可以順利獲取到更新后的地址努咐。
雖然不影響正常訪問苦蒿，但用戶無法將訪問過程中改變hash后的地址存為書簽。
測試環(huán)境：MIUI 4.0
【Chrome Mobile】fixed元素無法點擊
場景：父元素設置position: fixed;
子元素設置position: absolute;
此時渗稍，如果父元素/子元素還設置了overflow: hidden 則出現(xiàn)“父元素遮擋該子元素“的bug佩迟。
視覺(view)層并沒有出現(xiàn)遮擋，只是無法觸發(fā)綁定在該子元素上的事件竿屹”ㄇ浚可理解為：「看到點不到」。
補充： 頁面往下滾動拱燃，觸發(fā)position: fixed;的特性時秉溉，才會出現(xiàn)這個bug，在最頂不會出現(xiàn)碗誉。
測試平臺： 小米1S召嘶，Android4.0的Chrome18
demo： http://maplejan.sinaapp.com/demo/fixed_chromemobile.html
解決辦法： 把父元素和子元素的overflow: hidden去掉。
以上來源于 http://www.cnblogs.com/maplejan/archive/2013/04/26/3045928.html
庫的使用實踐
zepto.js
使用zeptojs內(nèi)嵌到android webview影響正常滾動時
https://github.com/madrobby/zepto/blob/master/src/touch.js 去掉61行,其實就是使用原生的滾動
iscroll4
iscroll4 的幾個bug(來自 http://www.mansonchor.com/blog/blog_detail_64.html 內(nèi)有詳細講解)
1.滾動容器點擊input框诗充、select等表單元素時沒有響應】
onBeforeScrollStart: function (e) { e.preventDefault(); }
改為
onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():'');if(nodeType !='select'&& nodeType !='option'&& nodeType !='input'&& nodeType!='textarea') e.preventDefault(); }
2.往iscroll容器內(nèi)添加內(nèi)容時苍蔬，容器閃動的bug
源代碼的
has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()
改成
has3d = false
在配置iscroll時诱建，useTransition設置成false
3.過長的滾動內(nèi)容蝴蜓，導致卡頓和app直接閃退
- 不要使用checkDOMChanges。雖然checkDOMChanges很方便俺猿，定時檢測容器長度是否變化來refresh茎匠，但這也意味著你要消耗一個Interval的內(nèi)存空間
- 隱藏iscroll滾動條，配置時設置hScrollbar和vScrollbar為false押袍。
- 不得已的情況下诵冒，去掉各種效果，momentum谊惭、useTransform汽馋、useTransition都設置為false
4.左右滾動時侮东，不能正確響應正文上下拉動
iscroll的閃動問題也與渲染有關(guān)系，可以參考
運用webkit繪制渲染頁面原理解決iscroll4閃動的問題
iscroll4升級到5要注意的問題
iscroll或者滾動類框架滾動時不點擊的方法
可以使用以下的解決方案(利用data-setapi)
<a ontouchmove="this.s=1" ontouchend="this.s || window.open(this.dataset.href),this.s=0" target="_blank" data->黃浦江死豬之謎</a>
也可以用這種方法
$(document).delegate('[data-target]', 'touchmove', function () {
$(this).attr('moving','moving');
})
$(document).delegate('[data-target]', 'touchend', function () {
if ($(this).attr('moving') !== 'moving') {
//做你想做的豹芯。悄雅。
$(this).attr('moving', 'notMoving');
} else {
$(this).attr('moving', 'notMoving');
}
})
移動端字體問題
知乎專欄 - [無線手冊-4] dp、sp铁蹈、px傻傻分不清楚[完整]
Resolution Independent Mobile UI
Pixel density, retina display and font-size in CSS
跨域問題
手機瀏覽器也是瀏覽器宽闲，在ajax調(diào)用外部api的時候也存在跨域問題。當然利用 PhoneGap 打包后握牧，由于協(xié)議不一樣就不存在跨域問題了容诬。
但頁面通常是需要跟后端進行調(diào)試的。一般會報類似
XMLHttpRequest cannot load XXX
Origin null is not allowed by Access-Control-Allow-Origin.
以及
XMLHttpRequest cannot load http://. Request header field Content-Type is not allowed by Access-Control-Allow-Headers."
這時候可以讓后端加上兩個http頭
Access-Control-Allow-Origin "*"
Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
第一個頭可以避免跨域問題沿腰，第二個頭可以方便ajax請求設置content-type等配置項
這個會存在一些安全問題览徒，可以參考這個問題的討論 http://www.zhihu.com/question/22992229
PhoneGap 部分
http://snoopyxdy.blog.163.com/blog/static/60117440201432491123551 這里有一大堆snoopy總結(jié)的phonggap開發(fā)坑
Should not happen: no rect-based-test nodes found
在 Android 項目中的 assets 中的 HTML 頁面中加入以下代碼，便可解決問題
window,html,body{
overflow-x:hidden !important;
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
}
參考：
拿聯(lián)系人的時候報 ContactFindOptions is not defined
出現(xiàn)這個問題可能是因為 Navigator 取 contacts 時綁定的 window.onload
注意使用 PhoneGap 的 API 時颂龙，一定要在 devicereay 事件的處理函數(shù)中使用 API
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
callFetchContacts();
}
function callFetchContacts(){
var options = new ContactFindOptions();
options.multiple = true;
var fields = ["displayName", "name","phoneNumbers"];
navigator.contacts.find(fields, onSuccess, onError,options);
}
