2017最新整理移動Web開發遇到的坑

隨着前端的熱度不斷升溫，行業對前端的要求愈來愈高；精準無誤的實現UI設計，已成爲前端職業更加精細化的一種表現；
隨着移動互聯網的發展、WebApp彷佛一種不可逾越的鴻溝；愈來愈多的企業開始趨勢於輕量級的設計，H5正在慢慢的發酵能夠完成更多的原生體驗；
交互質量的提高，對前端更是一種質的飛越；前端做爲門檻低，精深難的事實一直被論證，想成爲真正大神，要經歷痛苦的月球表面-滿滿的都是坑；
只有爬過來的人，纔有資格說：要改變、要革新、作架構~

說了那麼多，就是爲了小夥伴們在前端的路上更加精細的學習；本文持續更新移動Web的各類大小泥坑~

目錄（更新20170216）

1.meta基礎知識

<!-- 聲明文檔使用的字符編碼 -->

    <meta charset='utf-8'>

    <!-- 優先使用 IE 最新版本和 Chrome -->

    <meta name="flexible" content="initial-dpr=1"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!-- 頁面描述 -->

    <meta name="description" content="不超過150個字符"/>

    <!-- 頁面關鍵詞 -->

    <meta name="keywords" content=""/>

    <!-- 網頁做者 -->

    <meta name="author" content="male"/>

    <!-- 搜索引擎抓取 -->

    <meta name="robots" content="index,follow"/>

    <!-- iOS 設備 begin -->

    <meta name="apple-mobile-web-app-title" content="標題">

    <!-- 添加到主屏後的標題（iOS 6 新增） -->

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <!-- 是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄 -->

    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

    <!-- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） -->

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <!-- 設置蘋果工具欄顏色 -->

    <meta name="format-detection" content="telphone=no, email=no"/>

    <!-- 忽略頁面中的數字識別爲電話，忽略email識別 -->

    <!-- 啓用360瀏覽器的極速模式(webkit) -->

    <meta name="renderer" content="webkit">

    <!-- 避免IE使用兼容模式 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <!-- 不讓百度轉碼 -->

    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <!-- windows phone 點擊無高光 -->

    <meta name="msapplication-tap-highlight" content="no">

    <meta name="msapplication-TileColor" content="#000"/>

2.移動端字體解決方案

 

body {

 

    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;}

 

iOS 4.0+ （iOS 9如下系統已經很是少） 使用英文字體 Helvetica Neue，以前的iOS版本降級使用 Helvetica。 中文字體設置爲華文黑體STHeiTi。
iOS 9+ Safari開始支持 -apple-system 參數， Chrome 使用 BlinkMacSystemFont ，兼容 iOS ／ MacOS
微軟雅黑是爲了兼容Win系統，畢竟視網膜分辨率的win系統用Simsun是很是醜陋的，能夠用4K屏@windowns 去看 JD 淘寶，你能忍的話我就沒話說
PingFang SC 是簡體蘋方，看須要 若是要命中對應 蘋方字體的話 直接寫 PingFang 不帶引號。
4.0以前版本英文字體原生Android使用的是Droid Sans，中文字體原生Android會命中Droid Sans Fallback。
4.0+ 中英文字體都會使用原生Android新的Roboto字體。
其餘第三方Android系統也一致選擇默認的無襯線字體。
Android 就直接讓它命中系統字體吧，由於你沒法預知發行廠商會去內置什麼字體，或者人家root去修改什麼字體。
移動端字體單位font-size選擇px仍是rem
對於只須要適配少部分手機設備，且分辨率對頁面影響不大的，使用px便可
對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備

rem配置參考，適合視覺稿寬度爲750px的:

html{font-size:10px}

@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

@media screen and (min-width:800px){html{font-size:25px}}

 

3.Touch事件的詳細解析
當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件
如下支持webkit
touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指
touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動
touchend——當手指離開屏幕時觸發
touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用
TouchEvent
touches：屏幕上全部手指的信息
targetTouches：手指在目標區域的手指信息
changedTouches：最近一次觸發該事件的手指信息
touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最後一次的信息，最好用於計算手指信息
參數信息(changedTouches[0])
clientX、clientY在顯示區的座標
target：當前元素
參考：https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
4.Click事件的延時問題
移動設備上的web網頁是有300ms延遲的，玩玩會形成按鈕點擊延遲甚至是點擊失效。
緣由就出在瀏覽器須要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉連接<a href="#"></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊連接仍是要雙擊該部分區域進行縮放操做，因此，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，若是在t時間區間裏用戶未進行下一次點擊，則瀏覽器會作單擊跳轉連接的處理，若是t時間裏用戶進行了第二次單擊操做，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操做。那麼這個時間區間t有多少呢？在IOS safari下，大概爲300毫秒。這就是延遲的由來。形成的後果用戶純粹單擊頁面，頁面須要過一段時間才響應，給用戶慢體驗感受，對於web開發者來講是，頁面js捕獲click事件的回調函數處理，須要300ms後才生效，也就間接致使影響其餘業務邏輯的處理。
解決方案：
fastclick能夠解決在手機上點擊事件的300ms延遲
zepto的touch模塊，tap事件也是爲了解決在click的延遲問題
觸摸事件的響應順序
一、ontouchstart 
二、ontouchmove 
三、ontouchend 
四、onclick
解決300ms延遲的問題，也能夠經過綁定ontouchstart事件，加快對事件的響應。

 

5.webkit表單輸入框placeholder的顏色值能改變麼

 

input::-webkit-input-placeholder{color:#AAAAAA;}

 

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

 其餘：

禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片:.css{-webkit-touch-callout: none}

禁止ios和android用戶選中文字:.css{-webkit-user-select:none}

5.經常使用的移動端框架
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

swiper.js

 

6.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;}

 

7.0.5像素邊框的實現
你們都知道，設計稿中的1像素，在頁面上其實就是2像素；這時他們就會說，咱們的1px太粗；
其實，咱們應該用理解的態度對待這件事，由於0.5像素的線確實好看，由於原生的線也是0.5像素；若是你學習了這個方法，其實也不會再介意1px和0.5px了；
下面是一個demo 純css利用僞類實現，整體來說仍是比較穩定的，要求同級必須是相對定位；

 

<div class="box">

 

    <div class="btn">

        0.5像素↓

    </div>

</div>

<style type="text/css" media="all">

    .box{

        width:300px;

        height:300px;

        background-color:#f1f1f1;

    }

    .btn{

        width:300px;

        line-height:150px;

        position:relative;

        background-color:#f1f1f1;

        text-align:center;

    }

    .btn:after {

    content: " ";

    position: absolute;

    left: 0;

    width: 100%;

    height: 1px;

    color: #d9d9d9;

    bottom: 0;

    border-bottom: 1px solid #fff;

    -webkit-transform-origin: 0 100%;

    transform-origin: 0 100%;

    -webkit-transform: scaleY(.5);

    transform: scaleY(.5)

}

/**less寫法**/

.bor-b(@col:#eee) {

  position: relative;

  &:after{

    content: " ";

    position: absolute;

    left: 0;

    width: 100%;

    height: 1px;

    color: #d9d9d9;

    bottom: 0;

    border-bottom: 1px solid @col;

    -webkit-transform-origin: 0 100%;

    transform-origin: 0 100%;

    -webkit-transform: scaleY(0.5);

    transform: scaleY(0.5);}

}

</style>

 

8.解決移動端雙擊頁面上滑問題

 

function proMove() {

 

var agent = navigator.userAgent.toLowerCase(); //檢測是不是ios

var iLastTouch = null; //緩存上一次tap的時間

if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0) {

document.body.addEventListener('touchend', function(event) {

var iNow = new Date().getTime();

iLastTouch = iLastTouch || iNow + 1 /** 第一次時將iLastTouch設爲當前時間+1 */ ;

var delta = iNow - iLastTouch;

if(delta < 500 && delta > 0) {

event.preventDefault();

return false;

}

iLastTouch = iNow;

}, false);

}

}