移動端開發技巧 · COLIN前端開發筆記

##參與貢獻移動前端開發收藏夾，歡迎使用 [Issues](https://github.com/hoosin/mobile-web-favorites/issues/new) 以及 Pull Request 貢獻者名單：[https://github.com/hoosin/mobile-web-favorites/graphs/contributors](https://github.com/hoosin/mobile-web-favorites/graphs/contributors) ##同類項目 [騰訊移動Web前端知識庫](https://github.com/AlloyTeam/Mars) [maxzhang博客](https://github.com/maxzhang/maxzhang.github.com/issues) ##issues [QQ瀏覽器X5內核問題匯總](https://github.com/hoosin/mobile-web-favorites/issues/11) ##一些非常重要的工具類網站 [html5與css3技術應用評估](http://html5please.com/ "html5與css3技術應用評估") [各種奇妙的hack](http://browserhacks.com/ "各種奇妙的hack") [幾乎所有設備的屏幕尺寸與像素密度表](http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density "幾乎所有設備的屏幕尺寸與像素密度表") [移動設備參數表](http://screensiz.es/phone "移動設備參數表") [ios端移動設備參數速查](http://ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/ "ios端移動設備參數速查") [瀏覽器兼容表](http://www.quirksmode.org/compatibility.html "瀏覽器兼容表") [移動設備查詢器](https://deviceatlas.com/device-data/devices "移動設備查詢器") [移動設備適配庫](http://51degrees.codeplex.com/ "移動設備適配庫") [viewport與設備尺寸在線檢測器](https://deviceatlas.com/device-data/devices "viewport與設備尺寸在線檢測器") [html5移動端兼容性速查](http://mobilehtml5.org/ "html5移動端兼容性速查") [在線轉換字體](http://www.fontsquirrel.com/tools/webfont-generator "在線轉換字體") [css3選擇器測試](http://tools.css3.info/selectors-test/test.html "css3選擇器測試") [兼容性速查表](http://caniuse.com/ "兼容性速查表") [瀏覽器的一些獨特參數](http://www.browserscope.org/ "瀏覽器的一些獨特參數") [各種各樣的媒體查詢收集](http://nmsdvid.com/snippets/ "各種各樣的媒體查詢收集") [css3動畫在線制作器](http://isux.tencent.com/css3/ "css3動畫在線制作器") [css3漸變在線制作器](http://www.colorzilla.com/gradient-editor/ "css3漸變在線制作器") [移動端手勢表](http://ww1.sinaimg.cn/bmiddle/c2c57f68jw1e4fh7dmw12j20fi2w6qe1.jpg "移動端手勢表") [webkit獨有的樣式分析](http://ued.ctrip.com/blog/wp-content/webkitcss/ "webkit獨有的樣式分析") ##響應式測試工具 Firefox 瀏覽器內置了自定義設計視圖的功能，可以通過 Firefox->Web 開發者->自定義設計視圖（或者摁下 ```Shift + Ctrl + m``` ）。相比網絡工具，運行更加流暢，無需聯網。 [判斷 iPad 和 iPhone 的版本和狀態的 CSS 媒體查詢代碼](http://yujiangshui.com/document/css-media-queries-for-ipads-and-iphones-chinese-version/) [Viewport Resizer](http://lab.maltewassermann.com/viewport-resizer/ "resize") [screenqueri](http://beta.screenqueri.es/ "resize") [responsivepx](http://responsivepx.com "resize") [responsinator](http://www.responsinator.com/ "resize") [resizemybrowser](http://resizemybrowser.com/ "resize") [quirktools](https://quirktools.com/screenfly/ "resize") ##一篇webapp開發的最佳實踐與中文總結 [原文](http://blog.forecast.io/its-not-a-web-app-its-an-app-you-install-from-the-web/) [當前 WEB APP 開發的最佳實踐](http://lyric.im/best-practice-for-web-app-development) ##來自[maxzhang](https://github.com/maxzhang "ava")的一些移動端經驗總結干貨 [移動Web單頁應用開發實踐——頁面結構化](https://github.com/maxzhang/maxzhang.github.com/issues/8 "ava") [移動Web產品前端開發口訣——“快”](https://github.com/maxzhang/maxzhang.github.com/issues/1 "ava") [移動Web開發，4行代碼檢測瀏覽器是否支持position:fixed](https://github.com/maxzhang/maxzhang.github.com/issues/7 "ava") [使用border-image實現類似iOS7的1px底邊](https://github.com/maxzhang/maxzhang.github.com/issues/4 "ava") [移動端web頁面使用position:fixed問題總結](https://github.com/maxzhang/maxzhang.github.com/issues/2 "ava") [移動Web開發實踐——解決position:fixed自適應BUG](https://github.com/maxzhang/maxzhang.github.com/issues/11 "ava") [移動手機瀏覽器m3u8格式視頻流播放支持程度測試](https://github.com/maxzhang/maxzhang.github.com/issues/19 "ava") ##從`meta`開始本節之后可能也涉及 `meta` 標簽，但為了更加全面的摸透 `meta` 特地用一節的篇幅來系統概述。 ###一、meta 標簽分兩大部分：HTTP 標題信息（http-equiv）和頁面描述信息（name）。 ####1、http-equiv 屬性的 Content-Type 值（顯示字符集的設定）說明：設定頁面使用的字符集，用以說明主頁制作所使用的文字語言，瀏覽器會根據此來調用相應的字符集顯示 page 內容。用法： ```html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ``` 注意：該 meta 標簽定義了 HTML 頁面所使用的字符集為 utf-8 ，就是萬國碼。它可以在同一頁面顯示中文簡體、繁體及其它語言（如日文，韓文）等。 ####2、name 屬性的 viewport 值（移動屏幕的縮放）也就是可視區域。對于桌面瀏覽器，我們都很清楚 viewport 是什么，就是除去了所有工具欄、狀態欄、滾動條等等之后用于看網頁的區域，這是真正有效的區域。由于移動設備屏幕寬度不同于傳統 web，因此我們需要改變 viewport 值。實際上我們可以操作的屬性有 4 個： >width – // viewport 的寬度（范圍從 200 到 10,000，默認為 980 像素） >height – // viewport 的高度（范圍從 223 到 10,000 ） >initial-scale – // 初始的縮放比例（范圍從 > 0 到 10） >minimum-scale – // 允許用戶縮放到的最小比例 >maximum-scale – // 允許用戶縮放到的最大比例 >user-scalable – // 用戶是否可以手動縮放 (no，yes) ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> ``` 說明： * 強制讓文檔與設備的寬度保持 1:1 ； * 文檔最大的寬度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）； * user-scalable 定義用戶是否可以手動縮放（ no 為不縮放），使頁面固定設備上面的大小；注意：實際測試中發現，有些安卓系統自帶的瀏覽器并不支持這一條規則，能夠對頁面進行放大，一旦放大響應的 box 也隨之放大，導致頁面出現錯亂問題，解決方法：定義頁面的最小寬度 ```css body { min-width: 320px; } ``` ####3、name 屬性的 format-detection 值（忽略頁面中的數字識別為電話號碼） ```html <meta name="format-detection" content="telephone=no" /> ``` 說明： * 使設備瀏覽網頁時對數字不啟用電話功能（不同設備解釋不同，iTouch 點擊數字為存入聯系人，iPhone 為撥打電話），忽略將頁面中的數字識別為電話號碼。 * 若需要啟用電話功能將 telephone=yes 即可，若在頁面上面有 Google Maps, iTunes 和 YouTube 的鏈接會在ios設備上打開相應的程序組件。 ####4、name 屬性的 apple-mobile-web-app-capable 值（網站開啟對 web app 程序的支持） ```html <meta name="apple-mobile-web-app-capable" content="yes" /> ``` 說明： * 網站開啟對 web app 程序的支持。 * 該 meta 可以看出內容為“蘋果設備 web 應用程序 xx”，就是說該 meta 是專門定義 web 應用的。 ####5、name 屬性的 apple-mobile-web-app-status-bar-style 值（改變頂部狀態條的顏色） ```html <meta name="apple-mobile-web-app-status-bar-style" content="black" /> ``` 說明： * 在 web app 應用下狀態條（屏幕頂部條）的顏色； * 默認值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；注意：若值為“black-translucent”將會占據頁面位置，浮在頁面上方（會覆蓋頁面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕為 40px ）。 ####6、name 屬性設置作者姓名及聯系方式 ```html <meta name="author" contect="liudanyun, liudy1024@163.com" /> ``` ###二、蘋果 Web App 其他設置：當然，配合 Web App 的 icon 和啟動界面需要額外的兩端代碼進行設定，如下所示： ```html <link rel="apple-touch-icon-precomposed" href="iphone_logo.png" /> ``` 說明：這個 link 就是設置 Web App 的放置主屏幕上 icon 文件路徑。使用： * 該路徑需要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。 * 圖片尺寸可以設定為 57*57（px）或者 Retina 可以定為 114*114（px），iPad 尺寸為 72*72（px） ```html <link rel="apple-touch-startup-image" href="logo_startup.png" /> ``` 說明：這個 link 就是設置啟動時候的界面。使用： * 放置的路徑和上面一樣。 * 官方規定啟動界面的尺寸必須為 320*640（px），原本以為 Retina 屏幕可以支持雙倍，但是不支持，圖片顯示不出來。 * 如果對 Web App 的這兩個 meta 還有不能詳細理解的可以查看官方解釋：Meta Tags 關于 link 方面還有更多的參數設置（例如：iPod、iPad、iPhone 不同尺寸不同圖標），可以查看官方標準文檔：[Configuring Web Applications](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html "Applications") ##本資料很多引用了指尖上的js系列，在此向作者表示感謝 [對于Touch的處理](http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html "article1") [處理簡單手勢](http://www.cnblogs.com/pifoo/archive/2011/05/22/webkit-touch-event-2.html "article2") [處理復雜手勢](http://www.cnblogs.com/pifoo/archive/2011/05/22/webkit-touch-event-3.html "article3") meta標簽，這些meta標簽在開發webapp時起到非常重要的作用 ```html <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里多個屬性的設置一定要用分號+空格來隔開，如果不規范將不會起作用。* 注意根據[public_00](http://www.weibo.com/avajayam "ava")提供的資料補充，content使用分號作為分隔，在老的瀏覽器是支持的，但不是規范寫法。規范的寫法應該是使用逗號分隔，參考: [tip1](http://developer.android.com/guide/webapps/targeting.html) | [tip2](http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html) 其中： * width - viewport的寬度 * height - viewport的高度 * initial-scale - 初始的縮放比例 * minimum-scale - 允許用戶縮放到的最小比例 * maximum-scale - 允許用戶縮放到的最大比例 * user-scalable - 用戶是否可以手動縮放第二個meta標簽是iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；第三個meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；第四個meta標簽表示：告訴設備忽略將頁面中的數字識別為電話號碼在設置了initial-scale=1 之后，我們終于可以以1:1 的比例進行頁面設計了。關于viewport，還有一個很重要的概念是：iphone 的safari 瀏覽器完全沒有滾動條，而且不是簡單的“隱藏滾動條”，是根本沒有這個功能。iphone 的safari 瀏覽器實際上從一開始就完整顯示了這個網頁，然后用viewport 查看其中的一部分。當你用手指拖動時，其實拖的不是頁面，而是viewport。瀏覽器行為的改變不止是滾動條，交互事件也跟普通桌面不一樣。 (請參考：指尖的下JS 系列文章) ##其中viewport相關的知識也可以參考大漠的文章 [此像素非彼像素](http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html "pixel") ##點擊與click事件對于a標記的點擊導航，默認是在onclick事件中處理的。而移動客戶端對onclick的響應相比PC瀏覽器有著明顯的幾百毫秒延遲。在移動瀏覽器中對觸摸事件的響應順序應當是： ontouchstart -> ontouchmove -> ontouchend -> onclick 因此，如果確實要加快對點擊事件的響應，就應當綁定ontouchend事件。使用click會出現綁定點擊區域閃一下的情況，解決：給該元素一個樣式如下 ```css -webkit-tap-highlight-color: rgba(0,0,0,0); ``` 如果不使用click，也不能簡單的用touchstart或touchend替代，需要用touchstart的模擬一個click事件，并且不能發生touchmove事件，或者用zepto中的tap（輕擊）事件。 ```css body{-webkit-overflow-scrolling: touch;} ``` 用iphone或ipad瀏覽很長的網頁滾動時的滑動效果很不錯吧？不過如果是一個div，然后設置```height:200px;overflow:auto;```的話，可以滾動但是完全沒有那滑動效果，很郁悶吧？我看到很多網站為了實現這一效果，用了第三方類庫，最常用的是iscroll（包括新浪手機頁，百度等）我一開始也使用，不過自從用了```-webkit-overflow-scrolling: ```touch;樣式后，就完全可以拋棄第三方類庫了，把它加在```body{}```區域，所有的```overflow```需要滾動的都可以生效了。 ##頁面描述 ```html <link rel="apple-touch-icon-precomposed" href="http://www.xxx.com/App_icon_114.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.xxx.com/App_icon_72.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.xxx.com/App_icon_114.png" /> ``` 這個屬性是當用戶把連接保存到手機桌面時使用的圖標，如果不設置，則會用網頁的截圖。有了這，就可以讓你的網頁像APP一樣存在手機里了 ```html <link rel="apple-touch-startup-image" href="/img/startup.png" /> ``` 這個是APP啟動畫面圖片，用途和上面的類似，如果不設置，啟動畫面就是白屏，圖片像素就是手機全屏的像素 ```html <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> ``` 這個描述是表示打開的web app的最上面的時間、信號欄是黑色的，當然也可以設置其它參數，詳細參數說明在：[Supported Meta Tags](http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html "css3漸變在線制作器") ```html <meta name="apple-touch-fullscreen" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" /> ``` 這2個描述也很有用的，如果沒有它，你的web app會用safari瀏覽器打開，有了它，就會用獨立進程的無地址欄的打開，完全可以和普通的APP比擬了下面還有個不錯的css，是用來區分視網膜屏幕的，這樣你可以在iphone這樣的手機里載入2x的圖片，就不會模糊了 ```css @media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5),only screen and (min-resolution:200dpi) { #logo{background-image: url(logo@2x.png);} } ``` ##樣式表: ```html <link rel=”apple-touch-startup-image” href=”startup.png” /> // 設置開始頁面圖片 <link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在設置書簽的時候可以顯示好看的圖標 <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> ``` ##手機瀏覽器常用手勢動作監聽封裝(配合zepto,來自mansonchor) [手機瀏覽器常用手勢動作監聽封裝](http://wo.poco.cn/manson/post/id/268780) ##事件： (請參考：指尖的下JS 系列文章) ##手勢事件 * touchstart //當手指接觸屏幕時觸發 * touchmove //當已經接觸屏幕的手指開始移動后觸發 * touchend //當手指離開屏幕時觸發 * touchcancel ##觸摸事件 * gesturestart //當兩個手指接觸屏幕時觸發 * gesturechange //當兩個手指接觸屏幕后開始移動時觸發 * gestureend ##屏幕旋轉事件 * onorientationchange ##檢測觸摸屏幕的手指何時改變方向 * orientationchange ##touch事件支持的相關屬性 * 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 * 屏幕旋轉事件：onorientationchange 添加屏幕旋轉事件偵聽，可隨時發現屏幕旋轉狀態（左旋、右旋還是沒旋）。例子： ##判斷屏幕是否旋轉 ```js 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; }; }; ``` ##添加事件監聽 ```js addEventListener('load', function(){ orientationChange(); window.onorientationchange = orientationChange; }); ``` ##隱藏地址欄 & 處理事件的時候，防止滾動條出現： ```js // 隱藏地址欄 & 處理事件的時候，防止滾動條出現 addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); }); ``` ##雙手指滑動事件： ```js // 雙手指滑動事件 addEventListener('load',function(){ window.onmousewheel = twoFingerScroll;}, false // 兼容各瀏覽器，表示在冒泡階段調用事件處理程序 (true 捕獲階段) ); function twoFingerScroll(ev) { var delta =ev.wheelDelta/120; //對 delta 值進行判斷(比如正負) ，而后執行相應操作 return true; }; ``` ##判斷是否為iPhone： ```js // 判斷是否為 iPhone ： function isAppleMobile() { return (navigator.platform.indexOf('iPad') != -1); }; ``` ##localStorage: ```js var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名稱是 n 的數據存在，則將其讀出，賦予變量 v 。 localStorage.setItem('n', v); // 寫入名稱為 n、值為 v 的數據 localStorage.removeItem('n'); // 刪除名稱為 n 的數據 ``` ##使用特殊鏈接：如果你關閉自動識別后，又希望某些電話號碼能夠鏈接到 iPhone 的撥號功能，那么可以通過這樣來聲明電話鏈接 , ```html <a href="tel:12345654321">打電話給我</a> <a href="sms:12345654321">發短信</a> ``` 或用于單元格： ```html <td onclick="location.href='tel:122'"></td> ``` ##自動大寫與自動修正要關閉這兩項功能，可以通過autocapitalize 與autocorrect 這兩個選項： ```html <input type="text" autocapitalize="off" autocorrect="off" /> ``` ##WebKit CSS: ①“盒模型”的具體描述性質的包圍盒塊內容，包括邊界，填充等等。 ``` -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; //容器陰影（參數分別為：水平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; //內置的CSS 表現，暫時只支持push-button ``` ②“視覺格式化模型”描述性質，確定了位置和大小的塊元素。 ``` direction: rtl unicode-bidi: bidi-override; 常量：bidi-override/embed/normal ``` ③“視覺效果”描述屬性，調整的視覺效果塊內容，包括溢出行為，調整行為，能見度，動畫，變換，和過渡。 ``` 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; 鏡向反轉 -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) ``` ④“生成的內容，自動編號，并列出”描述屬性，允許您更改內容的一個組成部分，創建自動編號的章節和標題，和操縱的風格清單的內容。 ``` content: “Item” counter(section) ” “; This resets the counter. First section >two section three section counter-increment: section 1; counter-reset: section; ``` ⑤“分頁媒體”描述性能與外觀的屬性，控制印刷版本的網頁，如分頁符的行為。 ``` page-break-after: auto; 常量：always/auto/avoid/left/right page-break-before: auto; 常量：always/auto/avoid/left/right page-break-inside: auto; 常量：auto/avoid ``` ⑥“顏色和背景”描述屬性控制背景下的塊級元素和顏色的文本內容的組成部分。 ``` -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 ``` ⑦ “字型”的具體描述性質的文字字體的選擇范圍內的一個因素。報告還描述屬性用于下載字體定義。 ``` 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(迭代次數) 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 ``` ⑨“表格”描述的布局和設計性能表的具體內容。 ``` -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 ``` ⑩“用戶界面”描述屬性，涉及到用戶界面元素在瀏覽器中，如滾動文字區，滾動條，等等。報告還描述屬性，范圍以外的網頁內容，如光標的標注樣式和顯示當您按住觸摸觸摸目標，如在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 中最具創新力的特性：使用過渡函數定義動畫。 ``` -webkit-animation: title infinite ease-in-out 3s; animation 有這幾個屬性： -webkit-animation-name： //屬性名，就是我們定義的keyframes -webkit-animation-duration：3s //持續時間 -webkit-animation-timing-function： //過渡類型：ease/ linear(線性) /ease-in(慢到快)/ease-out(快到慢) /ease-in-out(慢到快再到慢) /cubic-bezier -webkit-animation-delay：10ms //動畫延遲(默認0) -webkit-animation-iteration-count： //循環次數(默認1)，infinite 為無限 -webkit-animation-direction： //動畫方式：normal(默認正向播放)； alternate(交替方向，第偶數次正向播放，第奇數次反向播放) ``` 這些同樣是可以簡寫的。但真正讓我覺的很爽的是keyframes，它能定義一個動畫的轉變過程供調用，過程為0%到100%或from(0%)到to(100%)。簡單點說，只要你有想法，你想讓元素在這個過程中以什么樣的方式改變都是很簡單的。 ``` -webkit-transform: 類型（縮放scale/旋轉rotate/傾斜skew/位移translate） scale(num,num) 放大倍率。scaleX 和 scaleY(3)，可以簡寫為：scale(* , *) rotate(*deg) 轉動角度。rotateX 和 rotateY，可以簡寫為：rotate(* , *) Skew(*deg) 傾斜角度。skewX 和skewY，可簡寫為：skew(* , *) translate(*,*) 坐標移動。translateX 和translateY，可簡寫為：translate(* , *)。 ``` ##利用media query監聽 media query相信大部分人已經使用過了。其實javascript可以配合media query這么用： ```js 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接口做的事件監聽，所以很強大！ ##鎖定 viewport ```js ontouchmove="event.preventDefault()" //鎖定viewport，任何屏幕操作不移動用戶界面（彈出鍵盤除外）。 ``` ##被點擊元素的外觀變化，可以使用樣式來設定： ``` -webkit-tap-highlight-color: 顏色 ``` ##偵測iPhone/iPod 開發特定設備的移動網站，首先要做的就是設備偵測了。下面是使用Javascript偵測iPhone/iPod的UA，然后轉向到專屬的URL。 ```js 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是可以在水果設備上運行的，但是用戶還是可以禁用。它也會造成客戶端刷新和額外的數據傳輸，所以下面是服務器端偵測和轉向： ```js if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) { 　　header('Location: http://yoursite.com/iphone'); 　　exit(); } ``` ##阻止旋轉屏幕時自動調整字體大小 ```css html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;} ``` ##iPhone才識別的CSS 如果不想設備偵測，可以用CSS媒體查詢來專為iPhone/iPod定義樣式。 ```css @media screen and (max-device-width: 480px) {} ``` ##縮小圖片網站的大圖通常寬度都超過480像素，如果用前面的代碼限制了縮放，這些圖片在iPhone版顯示顯然會超過屏幕。好在iPhone機能還夠，我們可以用CSS讓iPhone自動將大圖片縮小顯示。 ```css @media screen and (max-device-width: 480px){ 　　img{max-width:100%;height:auto;} } ``` ##模擬:hover偽類因為iPhone并沒有鼠標指針，所以沒有hover事件。那么CSS :hover偽類就沒用了。但是iPhone有Touch事件，onTouchStart 類似 onMouseOver，onTouchEnd 類似 onMouseOut。所以我們可以用它來模擬hover。使用Javascript： ```js 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效果： ```css a:hover, a.hover { /* 你的hover效果 */ } ``` 這樣設計一個鏈接，感覺可以更像按鈕。并且，這個模擬可以用在任何元素上。 ##flexbox布局模板 [flex模板](http://jsbin.com/ibuwol/2/edit "article5") [深入了解flex布局](http://www.w3cplus.com/blog/666.html "article6") ##利用高質量圖片優化retina屏幕的顯示(來自 w3cplus) [經典的文章](http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/ "article5") [使用CSS3的background-size優化蘋果的Retina屏幕的圖像顯示](http://www.w3cplus.com/css/css-background-size-graphics.html "article5") [使用css sprites來優化你的網站在Retina屏幕下顯示](http://www.w3cplus.com/css/using-css-sprites-to-optimize-your-website-for-retina-displays.html "article5") [一個案例](http://alexthorpe.com/uncategorized/css-sprites-for-retina-display-devices/683/ "article5") ##測試是否支持svg圖片 ``` document.implementation.hasFeature("http:// www.w3.org/TR/SVG11/feature#Image", "1.1") ``` ##安卓中viewport的width大于device-width時文字無故折行 [Android上當viewport的width大于device-width時出現文字無故折行的解決辦法](http://www.iunbug.com/archives/2013/04/23/798.html) ##active的兼容(來自薛端陽) 今天發現，要讓a鏈接的Css active偽類生效，只需要給這個a鏈接的touch系列的任意事件touchstart/touchend綁定一個空的匿名方法即可hack成功 ```html <style> a {color: #000;} a:active {color: #fff;} </style> <a herf=”asdasd”>asdasd</a> <script> var a = document.getElementsByTagName(‘a’); for (var i = 0; i < a.length; i++) { a[i].addEventListener(‘touchstart’, function() {}, false); } </script> ``` ##消除transition閃屏兩個方法 ```css -webkit-transform-style: preserve-3d; /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/ -webkit-backface-visibility:?hidden; /*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/ ``` ##消除ie10里面的那個叉號 [Pseudo-elements](http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx "article4") input:-ms-clear{display:none;} ##關于ios與os端字體的優化(橫豎屏會出現字體加粗不一致等) [mac下網頁中文字體優化](http://blog.sina.com.cn/s/blog_6da647a601011u4v.html "article5") [UIWebView font is thinner in portrait than landscape](http://stackoverflow.com/questions/3220662/uiwebview-font-is-thinner-in-portrait-than-landscape "article5") ##js事件 click 事件普遍 300ms 的延遲在手機上綁定click 事件，會使得操作有300ms 的延遲，體驗并不是很好。開發者大多數會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成 ##ios點擊會慢300ms [IOS browsers have a 300ms click delay - But developers can bypass it](https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE "article5") [Eliminate 300ms delay on click events in mobile Safarii](http://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari "article5") 使用css3動畫的時盡量利用3D加速，從而使得動畫變得流暢。動畫過程中的動畫閃白可以通過backface-visibility 隱藏。 ```css -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; ``` ##常見的IPHONE 和 Android屏幕參數。 * 設備分辨率設備像素比率 * 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 像素實際上表現為一塊 2×2 的像素。所以圖片像是被放大2倍一樣，模糊不清晰。解決辦法： 1、頁面引用 ```html <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文件里 ```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); } } ``` ##ie10的特殊鼠標事件 [IE10 事件監聽](http://www.mansonchor.com/blog/blog_detail_73.html "article5") ##不讓android識別郵箱 ```html <meta content="email=no" name="format-detection" /> ``` ##禁止ios彈出各種操作窗口 ```css -webkit-touch-callout:none ``` ##禁止用戶選中文字 ```css -webkit-user-select:none ``` ##動畫效果中，使用translate比使用定位性能高 [Why Moving Elements With Translate() Is Better Than Pos:abs Top/left](http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/) ##拿到滾動條 ``` window.scrollY window.scrollX ``` 比如要綁定一個touchmove的事件，正常的情況下類似這樣(來自呼吸二氧化碳) ```js $('div').on('touchmove', function(){ //.….code {}); ``` 而如果中間的code需要處理的東西多的話，fps就會下降影響程序順滑度，而如果改成這樣 ```js $('div').on('touchmove', function() { setTimeout(function() { //.….code }, 0); {}); ``` 把代碼放在setTimeout中，會發現程序變快. ##android監聽返回鍵 [【Javascript設計模式16】- 享元模式](http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-flyweight/) ##關于ios系統中，webapp啟動圖片在不同設備上的適應性設置 [不同設備上的適應性設置](http://stackoverflow.com/questions/4687698/mulitple-apple-touch-startup-image-resolutions-for-ios-web-app-esp-for-ipad/10011893#10011893) ##關于ios系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格(焦點科技葛亮) 可以通過正則去掉 ``` this.value = this.value.replace(/\u2006/g, ''); ``` ##關于android webview中，input元素輸入時出現的怪異情況,見圖: ![](https://box.kancloud.cn/2016-08-29_57c3f635c7495.png) Android web視圖,至少在HTC EVO和三星的Galaxy Nexus中，文本輸入框在輸入時表現的就像占位符。情況為一個類似水印的東西在用戶輸入區域，一旦用戶開始輸入便會消失(見圖片)。在android的默認樣式下當輸入框獲得焦點后,若存在一個絕對定位或者fixed的元素，布局會被破壞,其他元素與系統輸入字段會發生重疊(如搜索圖標將消失為搜索字段),可以觀察到布局與原始輸入字段有偏差(見截圖)。這是一個相當復雜的問題，以下簡單布局可以重現這個問題: ```html <label for="phone">Phone: *</label> <input type="tel" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" /> ``` 解決方法 ```css -webkit-user-modify: read-write-plaintext-only ``` 詳細參考[[Android]: Input Field Issues](http://www.bielousov.com/2012/android-label-text-appears-in-input-field-as-a-placeholder/)注意，該屬性會導致中文不能輸入詞組，只能單個字。感謝鬼哥與飛（游勇飛）貢獻此問題與解決方案另外，在position:fixed后的元素里，盡量不要使用輸入框。更多的bug可參考(移動端web頁面應用position:fixed題目總結)[http://www.cosdiv.com/page/M0/S882/882353.html] 依舊無法解決（摩托羅拉ME863手機），則使用```input:text```類型而非password類型，并設置其設置 ```-webkit-text-security: disc```; 隱藏輸入密碼從而解決。 ##JS動態生成的select下拉菜單在Android2.x版本的默認瀏覽器里不起作用解決方法刪除了```overflow-x:hidden```; 然后在JS生成下來菜單之后focus聚焦，這兩步操作之后解決了問題。(來自島都-小Qi) 參考 ```HTML <select> control disabled in Android WebView (in emulator)``` [http://stackoverflow.com/questions/4697908/html-select-control-disabled-in-android-webview-in-emulator](http://stackoverflow.com/questions/4697908/html-select-control-disabled-in-android-webview-in-emulator) ##andriod上去掉語音輸入按鈕 ``` input::-webkit-input-speech-button {display: none} ``` ##ios輸入框最佳實踐 [Mobile-friendly input of a digits + spaces string (a credit card number)](http://stackoverflow.com/questions/11219242/mobile-friendly-input-of-a-digits-spaces-string-a-credit-card-number) [HTML5 input type number vs tel](http://stackoverflow.com/questions/8216278/html5-input-type-number-vs-tel) [iPhone: numeric keyboard for text input](http://stackoverflow.com/questions/6178556/iphone-numeric-keyboard-for-text-input) [Managing the Keyboard](https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html) [HTML5 inputs and attribute support](http://www.miketaylr.com/code/input-type-attr.html) ##iphone6的那些事 [iPhone 6 屏幕揭秘](http://wileam.com/iphone-6-screen-cn/) ##ios6跟iphone5的那些事 ip5的媒體查詢 ``` @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {/* iPhone 5 or iPod Touch 5th generation */} ``` 　　使用媒體查詢，提供不同的啟動圖片： ```html <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)"> ``` 　　拍照上傳 ```html <input type=file accept="video/*"> <input type=file accept="image/*"> ``` 不支持其他類型的文件，如音頻，Pages文檔或PDF文件。也沒有getUserMedia攝像頭的實時流媒體支持。　可以使用的html5高級api: multipart POST表單提交上傳 XMLHttpRequest 2 AJAX上傳（甚至進度支持）文件API ，在iOS 6允許JavaScript直接讀取的字節數和客戶端操作文件。智能應用程序橫幅有了智能應用程序橫幅，當網站上有一個相關聯的本機應用程序時，Safari瀏覽器可以顯示一個橫幅。如果用戶沒有安裝這個應用程序將顯示“安裝”按鈕，或已經安裝的顯示“查看”按鈕可打開它。在iTunes Link Maker搜索我們的應用程序和應用程序ID。 ```html <meta name="apple-itunes-app" content="app-id=9999999"> ``` 可以使用 app-argument 提供字符串值，如果參加iTunes聯盟計劃，可以添加元標記數據 ```html <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）在頂部，直到用戶在下方點擊內容或關閉按鈕，你的網站才會展現全部的高度。它就像HTML的DOM對象，但它不是一個真正的DOM。 CSS 3濾鏡 ```css -webkit-filter: blur(5px) grayscale (.5) opacity(0.66) hue-rotate(100deg); ``` 交叉淡變 ```css background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%); ``` Safari中的全屏幕　　除了chrome-less 主屏幕meta標簽，現在的iPhone和iPod Touch（而不是在iPad）支持全屏幕模式的窗口。沒有辦法強制全屏模式，它需要由用戶啟動（工具欄上的最后一個圖標）。需要引導用戶按下屏幕上的全屏圖標來激活全屏效果。可以使用onresize事件檢測是否用戶切換到全屏幕。支持requestAnimationFrameAPI 支持image-set,retina屏幕的利器 ```css -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規范來自DOM4的Mutation Observers已經實現。您可以使用WebKitMutationObserver構造器捕獲DOM的變化 Safari不再總是對用 -webkit-transform:preserve-3d 的元素創建硬件加速支持window.selection 的Selection API Canvas更新：createImageData有一個參數，現在有兩個新的功能做好準備，用webkitGetImageDataHD和webkitPutImageDataHD提供高分辨率圖像。更新SVG處理器和事件構造函數 ##IOS7的大更新 [iOS 7 的 Safari 和 HTML5：問題，變化和新 API](http://jinlong.github.io/blog/2013/09/23/safari-ios7-html5-problems-apis-review/#jtss-tsina) [ios7的一些坑(英文)](http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7 "ios7的一些bug") [ios7的一些坑2(英文)](http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review "ios7的一些bug") ##webview相關 #Cache開啟和設置 ``` browser.getSettings().setAppCacheEnabled(true); browser.getSettings().setAppCachePath("/data/data/[com.packagename]/cache"); browser.getSettings().setAppCacheMaxSize(5*1024*1024); // 5MB ``` #LocalStorage相關設置 ``` 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有個問題，關閉APP或者重啟后，就清楚了，所以需要browser.getSettings().setDatabase相關的操作，把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占位圖雖然小，但是最好能提前加載到緩存延時加載執行js 主要原因就在于Android Webview的onPageFinished事件，Android端一般是用這個事件來標識頁面加載完成并顯示的，也就是說在此之前，會一直loading，但是Android的OnPageFinished事件會在Javascript腳本執行完成之后才會觸發。如果在頁面中使用JQuery，會在處理完DOM對象，執行完$(document).ready(function() {});事件自會后才會渲染并顯示頁面。 ##移動瀏覽器篇【UC瀏覽器】video標簽脫離文檔流場景：<video>標簽的父元素(祖輩元素)設置transform樣式后，<video>標簽會脫離文檔流。測試環境：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```）。測試環境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。【UC瀏覽器】position:fixed 屬性在UC瀏覽器的奇葩現象場景：設置了position: fixed 的元素會遮擋z-index值更高的同輩元素。　　　在8.6的版本,這個情況直接出現。　　　在8.7之后的版本,當同輩元素的height大于713這個「神奇」的數值時,才會被遮擋。測試環境：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值。測試環境：QQ手機瀏覽器 4.0/4.1/4.2 + Android 4.0 。【MIUI原生瀏覽器】瀏覽器地址欄hash不改變場景：location.hash 被賦值后，地址欄的地址不會改變。　　　但實際上 location.href 已經更新了，通過JavaScript可以順利獲取到更新后的地址。　　　雖然不影響正常訪問，但用戶無法將訪問過程中改變hash后的地址存為書簽。測試環境：MIUI 4.0 【Chrome Mobile】fixed元素無法點擊場景：父元素設置position: fixed; 　　　子元素設置position: absolute; 　　　此時，如果父元素/子元素還設置了overflow: hidden 則出現“父元素遮擋該子元素“的bug。　　　視覺(view)層并沒有出現遮擋，只是無法觸發綁定在該子元素上的事件。可理解為：「看到點不到」。補充：頁面往下滾動，觸發position: fixed;的特性時，才會出現這個bug，在最頂不會出現。測試平臺：小米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> 【微信瀏覽器】因為微信瀏覽器屏蔽了一部分鏈接圖片，所以需要引導用戶去打開新頁面，可以用以下方式判斷微信瀏覽器的ua ```javascript function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return false; } } ``` 后端判斷也很簡單，比如php ```php function is_weixin(){ if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false ) { return true; } return false; } ``` [實現微信瀏覽器內打開App Store鏈接](https://github.com/hoosin/mobile-web-favorites/issues/7) ##庫的使用實踐 ###zepto.js [zepto的一篇使用注意點講解](http://chaoskeh.com/blog/some-experience-of-using-zepto.html "zepto") [zepto的著名的tap“點透”bug](http://blog.youyo.name/archives/zepto-tap-click-through-research.html "zepto") [zepto源碼注釋](http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html "zepto") ###使用zeptojs內嵌到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>內有詳細講解) ``` 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容器內添加內容時，容器閃動的bug 源代碼的 ``` has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix() ``` 改成 ``` has3d = false ``` 在配置iscroll時，useTransition設置成false 3.過長的滾動內容，導致卡頓和app直接閃退 1). 不要使用checkDOMChanges。雖然checkDOMChanges很方便，定時檢測容器長度是否變化來refresh，但這也意味著你要消耗一個Interval的內存空間 2). 隱藏iscroll滾動條，配置時設置hScrollbar和vScrollbar為false。 3). 不得已的情況下，去掉各種效果，momentum、useTransform、useTransition都設置為false 4.左右滾動時，不能正確響應正文上下拉動 iscroll的閃動問題也與渲染有關系，可以參考 [運用webkit繪制渲染頁面原理解決iscroll4閃動的問題](http://www.iunbug.com/archives/2012/09/19/411.html "iscroll4") [iscroll4升級到5要注意的問題](http://blog.csdn.net/gcz564539969/article/details/9156141 "iscroll5") ##移動端字體問題(待補充) [dp、sp、px傻傻分不清楚](http://zhuanlan.zhihu.com/zhezhexiong/19565895) [Resolution Independent Mobile UI](http://www.sencha.com/blog/resolution-independent-mobile-ui) [Pixel density, retina display and font-size in CSS](http://stackoverflow.com/questions/12058574/pixel-density-retina-display-and-font-size-in-css) [各種ratio](http://bjango.com/articles/min-device-pixel-ratio/) ##跨域問題手機瀏覽器也是瀏覽器，在ajax調用外部api的時候也存在跨域問題。當然利用phonegap打包后，由于協議不一樣就不存在跨域問題了。但頁面通常是需要跟后端進行調試的。一般會報類似 ``` 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等配置項 ##phonegap部分 *Should not happen: no rect-based-test nodes found* 在android項目中的assets中的html頁面中加入以下代碼，便可解決問題 ```css window,html,body{ overflow-x:hidden !important; -webkit-overflow-scrolling: touch !important; overflow: scroll !important; } ``` 參考：[Android WebView JellyBean -> Should not happen: no rect-based-test nodes found](http://stackoverflow.com/questions/12090899/android-webview-jellybean-should-not-happen-no-rect-based-test-nodes-found) ##拿聯系人的時候報ContactFindOptions is not defined 出現這個問題可能是因為navigator取contacts時綁定的window.onload 注意使用phonegap的api時，一定要在devicereay事件的處理函數中使用api ```js 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); } ``` ##調試篇 ###手機抓包與配host 在PC上，我們可以很方便地配host，但是手機上如何配host，這是一個問題。這里主要使用fiddler和遠程代理，實現手機配host的操作，具體操作如下：首先，保證PC和移動設備在同一個局域網下； PC上開啟fiddler，并在設置中勾選“allow remote computers to connect” 1. 首先，保證PC和移動設備在同一個局域網下； 2. PC上開啟fiddler，并在設置中勾選“allow remote computers to connect” ![](https://box.kancloud.cn/2016-08-29_57c3f63687e78.png) 3. 手機上設置代理，代理IP為PC的IP地址，端口為8888（這是fiddler的默認端口）。通常手機上可以直接設置代理，如果沒有，可以去下載一個叫ProxyDroid的APP來實現代理的設置。 4. 此時你會發現，用手機上網，走的其實是PC上的fiddler，所有的請求包都會在fiddler中列出來，配合willow使用，即可實現配host，甚至是反向代理的操作。