目前自己接觸的移動端專案很有限，所以發現的坑不是那麼多，暫時只記錄下最近在解決的“小坑”。

一、簡單的移動端頁面最好不用JS外掛

在開發中使用自己熟悉的框架或者外掛對自己的開發效率幫助是很大的，但是在實際的開發中不能求效率而不考

慮後續的擴充套件性，畢竟使用者的需求是不斷變化的。以移動端用的較多的iScroll為例，如果你開發中，只是用了它的滑

屏功能，其他地方並沒有展示出它的優勢，建議還是使用Css來實現比較好。

首先，IScroll會讓原本簡單的功能實現變得複雜，例如錨點，使用了iscroll以後，href=”#anchor”是無效的，需要

使用IScroll的js方法 ,myScroll.scrollToElement("#anchor", time)

其次，IScroll會阻止部分DOM事件，目前遇到比較明顯的情況就是，video標籤定義的視訊在移動端播放受到影

響，安卓手機上的問題差異很大，例如無法點選播放、點選事件無響應等。

再次，在簡單的專案中移動端頁面使用的範圍可能很有限，也許只需要一個模板頁面即可，使用外掛反而會影響移動端響應速度，影響後期體驗優化，得不償失。

二、mate標籤功能其實挺強大

最近有使用js喚醒本地安裝APP的功能需求，現在採用的比較多的方式就是使用插入iframe的方式，配置APP的喚醒連線，在Android和iOS9以下的iPhone上好用的，但是在iPhone上體驗是很不好的。在iOS9系統上，這個方式就不行了。如果使用

總之，js在iPhone中喚醒APP並不如安卓中順利。這裡可以使用meta標籤來完美喚醒‘沉睡‘中的APP。

直接上方法：

<span style="font-size:18px;"><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"></span>

其中affiliate-data和app-argument

例如，我需要喚醒“億企贏”財稅的APP，下面的配置就能起作用。

<span style="font-size:18px;"><metaname="apple-itunes-app" content="app-id=1127148565, affiliate-data=myAffiliateData,app-argument=winwin://"></span>

Note:

Safari has a new Smart App Banner feature in iOS 6 and later that provides a standardized method of promoting apps on the App Store from a website.

如果你手機上沒有安裝這個APP，他會帶領你去appstore下載。

當我糾結很久在iOS9中喚醒APP的時候，這個標籤真心是個大救星啊，贊！

三、瀏覽器預設的某些性質要知道

對移動端web開發人員來講，最長用的單位就是CSS3引入的rem，這種善於“變換”的單位真的“彈”力十足，

rem“彈”得起來前提是你要有根據螢幕寬度改變而改變的根元素font-size,進而對整個頁面的rem做調整，從而達到適應不同尺寸螢幕的目的。

<span style="font-size:18px;">function rootRize() {
        var initWidth = 750;
        var thisWidth = document.documentElement.clientWidth;
        thisWidth > 750 ? thisWidth = 750 : '';
        document.getElementsByTagName('html')[0].style.fontSize = 20 * (thisWidth / initWidth) + 'px';
    }
    window.onload = rootRize;
window.onresize = rootRize
</span>

例如這樣改變頁面根元素大小，但是在谷歌中你會發現，當不斷減小頁面寬度的時候，根元素的font-size雖然在

變，但是到某個點的時候，頁面的rem卻不變了！！！然而在ff中是ok的。為什麼？

Google chrome iswrong

FF is Fine

其實出現這種狀況的原因很簡單，那就是谷歌瀏覽器“強制”最小的font-size是12px，所以，當根標籤小於12px的時候，在谷歌瀏覽器中會出現上述的問題，解決的方法就是將font-size儘量設大，讓其在320px寬的小屏手機中也能正常改變rem。

另外兩個特殊值也要記住：

16px

62.5%

很多的開發者一開始就是用html{font-size:62.5%},第一次見的時候我是有點懵的，為什麼要這樣設定字型大小？

因為16 X 62.5% = 10px，這樣使用rem來設定某些css的寬度高度什麼的就方便計算了,其中的16px是瀏覽器預設的字型大小。

坑不坑因人而異，歡迎提出更好的解決方案！