<span style="font-family: Arial, sans-serif; background-color: rgb(255, 255, 255);">1.移動端頁面佈局，使用相對的數值，不要使用絕對數值，推薦使用%，vw，vh，rem，em</span>

佈局的時候，如果一個元素你想讓他的寬高保持一定比例，而不隨螢幕變化，寬高設定的時候，使用同一個單位 都是CSS3的單位，低版本不相容 2.相容性：蘋果裝置微信強制使用的是os的瀏覽器safar，頁面訪問的體驗遠大於安卓；安卓情況比較亂套：知乎上有人說是微信6.0.2以上是強制使用的QQ的X5瀏覽器，但是實際情況來看（公司範圍），一部分手機如（魅族，小米，一加，三星，LG等）使用的是X5核心，另一部分如（nexus，國靖的小米）使用的是chrome的核心， 由此來看，安卓上的訪問情況大部分不容樂觀，會不支援某些屬性和出現一些異常。 3.經驗之談：UI給出的設計圖越來越美觀了，但是對於前端的要求就變高了，寫頁面之前，良好的頁面結構設計可以極大地豐富了相容性和擴充套件性，這個東西沒有對錯之分，只有好和更好。 4.移動端的動畫：這次我使用的是jquery.animate，出現情況，ios上各個裝置均正常，但是安卓方面X5核心的動畫卡頓嚴重。查閱資料，移動端的動畫大部分使用CSS3和zepto.js，儘量不使用jquery的，對於移動端的遊戲動畫，流行canvas。 5.touch事件：安卓支援click事件，但是ios不支援，推薦使用touch事件； touch事件基本型別：touchstart,touchmove,touchend, 對於之前需求中的判定向上滑動，向左滑動，向右滑動等推薦使用以下程式碼進行處理：

//返回角度
function GetSlideAngle(dx, dy) {
    return Math.atan2(dy, dx) * 180 / Math.PI;
}
//根據起點和終點返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑動
function GetSlideDirection(startX, startY, endX, endY) {
    var dy = startY - endY;
    var dx = endX - startX;
    var result = 0;
    //如果滑動距離太短
    if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
        return result;
    }
    var angle = GetSlideAngle(dx, dy);
    if (angle >= -45 && angle < 45) {
        result = 4;
    } else if (angle >= 45 && angle < 135) {
        result = 1;
    } else if (angle >= -135 && angle < -45) {
        result = 2;
    }
    else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
        result = 3;
    }
    return result;
}
//滑動處理
var startX, startY;
document.addEventListener('touchstart', function (ev) {
    startX = ev.touches[0].pageX;
    startY = ev.touches[0].pageY;
}, false);
document.addEventListener('touchend', function (ev) {
    var endX, endY;
    endX = ev.changedTouches[0].pageX;
    endY = ev.changedTouches[0].pageY;
    var direction = GetSlideDirection(startX, startY, endX, endY);
    switch (direction) {
        case 0:
            alert("沒滑動");
            break;
        case 1:
            alert("向上");
            break;
        case 2:
            alert("向下");
            break;
        case 3:
            alert("向左");
            break;
        case 4:
            alert("向右");
            break;
        default:
    }
}, false);
 

6.禁止滑屏：手指按住頁面進行滑動，頁面的動畫會停止，但是鬆手之後，動畫已經完成，影響了使用者體驗，在某些情況下（頁面只有一屏），應該禁止手指滑動，程式碼：

//禁止頁面滾動
function forbidPageScroll(){
    var stop=0;
    document.addEventListener("touchmove",function(e){
        if(stop==0){
            e.preventDefault();
            e.stopPropagation();
        }
    },false);
}

7.音訊：audio標籤的自動播放autoplay，iOS不支援，並給出理由“這會導致使用者的流量被偷取” 所以ios裝置上禁止了自動播放功能，可以繫結touchmove事件，使用者點選螢幕任何一處都可以觸發音訊播放。安卓支援自動播放。 8.推薦一個打亂陣列順序的簡單的方法：

var boss = [1,2,3,4,5,6,7,8];
//打亂順序
boss = boss.sort(function(){ return 0.5 - Math.random() });
 

注：官方介紹QQ瀏覽器X5核心是：基於開源webkit核心並進行 深度優化和合理擴充套件的優秀核心 對於前端來說，我只知道他對一些css不支援和一些奇異的現象。 1）img標籤慎用，在未對其指定寬度和高度的時候會莫名的放大；在對其指定高度和寬度的時候，在某些情況下也會莫名的放大。 解決方法：div+background+background-sizing; 2)  @keyframe+animate CSS3的動畫不支援。現在也沒法判斷到底是那條css不支援，但是兩者從來都是一起用的。 解決辦法：簡單動畫.gif 或者是div的background使用gif 3)  border 不支援，莫名的不支援。 解決辦法：暫無。 4）box-shadow 顯示不正常，會顯示成一條類似border但無法控制寬度的邊框。 解決辦法：暫無。 5） vh 抽風式的無法正常支援：設定box的width為vw，height為vh，瀏覽器會吧height中的vh也當場vw解析，但是使用padding-top的時候使用vh就可以正常顯示。 解決辦法，固定比例固定尺寸的圖片，節點等統一使用vw作為計量單位，縱向的邊距什麼的可以使用vh，實際情況動手實踐。 6）對jquery.animate的支援不是很好，嚴重卡頓的情況。 解決辦法：不要使用jquery 用 zepto。