移動Web資源整理
http://www.cocoachina.com/webapp/20150617/12070.htmlcss
本人於2013年末接觸移動端，簡單作下總結，首先了解下移動Web帶來的問題：html
-
設備更新換代快：低端機遺留下問題、高端機帶來新挑戰前端
-
瀏覽器廠商不統一：兼容問題多html5
-
網絡更復雜：弱網絡，頁面打開慢jquery
-
低端機性能差：頁面操做卡頓android
-
HTML5新技術多：學習成本不低ios
-
未知問題：坑多css3
面對這些問題，一開始咱們只能在未知中試錯，知道錯誤的方案才能更容易尋找正確的解決問題思路，2年多來，可看到移動Web在業界不斷趨向於成熟，各類框架和解決方案不斷的涌現讓移動端開發再也不是個噩夢。git
這幾天把想到的一點經驗先羅列出來，後續會持續更新，這篇文章能夠給剛接觸Web App開發的同窗帶來幫助，任何疑問歡迎留言探討。github
meta基礎知識
H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面
忽略將頁面中的數字識別爲電話號碼
忽略Android平臺中對郵箱地址的識別
當網站添加到主屏幕快速啓動方式，可隱藏地址欄，僅針對iOS的safari
將網站添加到主屏幕快速啓動方式，僅針對iOS的safari頂端狀態條的樣式
viewport模板
常見問題
移動端如何定義字體font-family
中文字體使用系統默認便可，英文用Helvetica
參考《移動端使用字體的思考》
移動端字體單位font-size選擇px仍是rem
對於只須要適配手機設備，使用px便可。
對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備。
rem配置參考：
移動端touch事件(區分webkit和Windows Phone)
當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件
如下支持webkit
-
touchstart：當手指觸碰屏幕時候發生。無論當前有多少隻手指
-
touchmove：當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動
-
touchend：當手指離開屏幕時觸發
-
touchcancel：系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用
如下支持Windows Phone 8
-
MSPointerDown——當手指觸碰屏幕時候發生。無論當前有多少隻手指
-
MSPointerMove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用css的html{-ms-touch-action: none;}能夠阻止默認狀況的發生：阻止頁面滾動
-
MSPointerUp——當手指離開屏幕時觸發
移動端click屏幕產生200-300 ms的延遲響應
移動設備上的web網頁是有300ms延遲的，玩玩會形成按鈕點擊延遲甚至是點擊失效。
如下是歷史緣由，來源一個公司內一個同事的分享：
2007年蘋果發佈首款iPhone上iOS系統搭載的safari爲了將適用於PC端上大屏幕的網頁能比較好的展現在手機端上，使用了雙擊縮放(double tap to zoom)的方案，好比你在手機上用瀏覽器打開一個PC上的網頁，你可能在看到頁面內容雖然能夠撐滿整個屏幕，可是字體、圖片都很小看不清，此時能夠快速雙擊屏幕上的某一部分，你就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。
雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。
緣由就出在瀏覽器須要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉連接，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊連接仍是要雙擊該部分區域進行縮放操做，因此，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，若是在t時間區間裏用戶未進行下一次點擊，則瀏覽器會作單擊跳轉連接的處理，若是t時間裏用戶進行了第二次單擊操做，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操做。那麼這個時間區間t有多少呢？在IOS safari下，大概爲300毫秒。這就是延遲的由來。形成的後果用戶純粹單擊頁面，頁面須要過一段時間才響應，給用戶慢體驗感受，對於web開發者來講是，頁面js捕獲click事件的回調函數處理，須要300ms後才生效，也就間接致使影響其餘業務邏輯的處理。
解決方案：
-
fastclick能夠解決在手機上點擊事件的300ms延遲
-
zepto的touch模塊，tap事件也是爲了解決在click的延遲問題
觸摸事件的響應順序
一、ontouchstart
二、ontouchmove
三、ontouchend
四、onclick
解決300ms延遲的問題，也能夠經過綁定ontouchstart事件，加快對事件的響應
什麼是Retina 顯示屏，帶來了什麼問題
retina：一種具有超高像素密度的液晶屏，一樣大小的屏幕上顯示的像素點由1個變爲多個，如在一樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變爲4個。
在高清顯示屏中的位圖被放大，圖片會變得模糊，所以移動端的視覺稿一般會設計爲傳統PC的2倍。
那麼，前端的應對方案是：設計稿切出來的圖片長寬保證爲偶數，並使用backgroud-size把圖片縮小爲原來的1/2
其它元素的取值爲原來的1/2，例如視覺稿40px的字體，使用樣式的寫法爲20px
參考《高清顯示屏原理及設計方案》
iOS系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉
iOS用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，也就是屬性值的最後一位設置爲0就能夠去除半透明灰色遮罩。
部分Android系統中元素被點擊時產生的邊框怎麼去掉
Android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果
-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符。
另外，有些機型去除不了，如小米2。對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤。
Windows Phone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉
webkit表單元素的默認外觀怎麼重置
webkit表單輸入框placeholder的顏色值能改變麼
webkit表單輸入框placeholder的文字能換行麼
iOS能夠，Android不行~
IE10（WP8）表單元素默認外觀如何重置
禁用 select 默認下拉箭頭
::-ms-expand 適用於表單選擇控件下拉箭頭的修改，有多個屬性值，設置它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。
禁用 radio 和 checkbox 默認樣式
::-ms-check 適用於表單複選框或單選按鈕默認圖標的修改，一樣有多個屬性值，設置它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。
禁用PC端表單輸入框默認清除按鈕
當表單文本輸入框輸入內容後會顯示文本清除按鈕，::-ms-clear 適用於該清除按鈕的修改，一樣設置使它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。
禁止iOS長按時不觸發系統的菜單，禁止iOS&Android長按時下載圖片
禁止iOS和Android用戶選中文字
參考《如何改變表單元素的外觀(for Webkit and IE10)》
打電話發短信的怎麼實現
打電話
發短信，Windows Phone系統無效
模擬按鈕hover效果
移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，可是移動設備中並無鼠標指針，使用css的hover並不能知足咱們的需求，還好國外有個激活css的active效果，代碼以下，
兼容性iOS5+、部分Android 4+、WP8
要作到全兼容的辦法，可經過綁定ontouchstart和ontouchend來控制按鈕的類名
屏幕旋轉的事件和樣式
事件
window.orientation，取值：正負90表示橫屏模式、0和180表現爲豎屏模式；
樣式
audio元素和video元素在ios和andriod中沒法自動播放
應對方案：觸屏即播
可參考《沒法自動播放的audio元素》
搖一搖功能
HTML5 deviceMotion：封裝了運動傳感器數據的事件，能夠獲取手機運動狀態下的運動加速度等數據。
手機拍照和上傳圖
使用總結：
-
iOS有拍照、錄像、選取本地圖片功能
-
部分Android只有選取本地圖片功能
-
Windows Phone不支持
-
input控件默認外觀醜陋
微信瀏覽器用戶調整字體大小後頁面矬了，怎麼阻止用戶調整
緣由
-
Anroid側是複寫了layoutinflater 對textview作了統一處理
-
iOS側是修改了body.style.webkitTextSizeAdjust值
普通解決方案：
-
Android暫無方案
-
iOS使用-webkit-text-size-adjust禁止調整字體大小
最好的解決方案：
-
整個頁面用rem或者百分比佈局
消除transition閃屏
網絡都是這麼寫的，但我並無測試出來
開啓硬件加速
-
解決頁面閃白
-
保證動畫流暢
取消input在ios下，輸入的時候英文首字母的默認大寫
android 上去掉語音輸入按鈕
Android 2.3 bug
-
@-webkit-keyframes 須要以0%開始100%結束，0%的百分號不能去掉
-
after和before僞類沒法使用動畫
-
border-radius不支持%單位
-
translate百分比的寫法和scale在一塊兒會致使失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
Android 4.x bug
-
三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
-
同時設置border-radius和背景色的時候，背景色會溢出到圓角之外部分
-
部分手機(如三星)，a連接支持鼠標:visited事件，也就是說連接訪問後文字變爲紫色
設計高性能CSS3動畫的幾個要素
-
儘量地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位
-
利用translate3D開啓GPU加速
參考《High Performance Animations》
fixed bug
-
iOS下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
-
Android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
-
iOS4下不支持position:fixed
解決方案
-
可用isroll.js，暫無完美方案
參考
《移動端web頁面使用position:fixed問題總結》
《使用iScroll.js解決ios4下不支持position:fixed的問題》
如何阻止Windows Phone的默認觸摸事件
Windows Phone下默認觸摸事件事件使用e.preventDefault是無效的
目前解決方法是使用樣式來禁用
參考
《Windows phone 8 touch support》
經常使用的移動端框架
zepto.js
語法與jquery幾乎同樣，會jquery基本會zepto~
最新版本已經更新到1.16
中文(非官網)：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
underscore.js
筆者沒用過，不過據說好用，推薦給你們~
該庫提供了一整套函數式編程的實用功能，可是沒有擴展任何JavaScript內置對象。
最新版本已經更新到1.8.2
滑屏框架
適合上下滑屏、左右滑屏等滑屏切換頁面的效果
flex佈局
flex佈局目前可以使用在移動中，並不是全部的語法都全兼容，但如下寫法筆者實踐過，效果良好~
/* ============================================================
flex：定義佈局爲盒模型
flex-v：盒模型垂直佈局
flex-1：子元素佔據剩餘的空間
flex-align-center：子元素垂直居中
flex-pack-center：子元素水平居中
flex-pack-justify：子元素兩端對齊
兼容性：ios 4+、android 2.3+、winphone8+
============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
示例：兩端對齊
使用注意：flex下的子元素必須爲塊級元素，非塊級元素在Android 2.3機器下flex失效。
參考：
FastClick
消除在移動瀏覽器上觸發click事件與一個物理Tap(敲擊)之間的300延遲。
參考《FastClick》
移動端touch事件
- 1. 移動web資源整理
- 2. 【原】移動web資源整理
- 3. 移動web資源整理[轉]
- 4. 【轉】移動web資源整理
- 5. 移動web資源整理-學習整理
- 6. 手機移動端WEB資源整合
- 7. 移動端Web資源整合
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • 移動設備 統計 - 瀏覽器信息
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker 清理命令
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 移動web資源整理
- 2. 【原】移動web資源整理
- 3. 移動web資源整理[轉]
- 4. 【轉】移動web資源整理
- 5. 移動web資源整理-學習整理
- 6. 手機移動端WEB資源整合
- 7. 移動端Web資源整合