移動端小項目的小總結~

時間 2019-11-08

標籤移動小項目的總結欄目無線简体版

原文原文鏈接

最近在作移動端的動畫，其中仍是碰到了不少的坑，在此記錄一下。做爲一個備忘！javascript

關於移動設備的不一樣屏幕分辨率

第一次作web app，前真的歷來沒作過移動端，真心感受移動端仍是也不容易啊。說說不一樣分辨率的處理方案吧。我採用的是最坑爹醉無語的縮放來解決的，定義了以iPhone4爲基準的最小屏幕比（320*450），以此在JS進行判斷設備的比例，選取最大的那個而後來進行縮放。以此來適應不一樣的屏幕！css

關於設備的搖晃

項目一來第一頁就是一個大地圖，而後設備左右搖晃的時候地圖隨之滾動顯示！
之前歷來沒接觸這玩意。根本就不知道有這麼個API。好吧，任務安排到這兒了。只有硬着頭皮去查詢了。搞了半天是event.accelerationIncludingGravity這玩意。html

javascriptvar that = this;
if (window.DeviceMotionEvent) {
    window.addEventListener("devicemotion", function (event) {
        that._gX = event.accelerationIncludingGravity.x; 
        that._gY = event.accelerationIncludingGravity.y;
        that._gZ = event.accelerationIncludingGravity.z;
    }
}

對於這玩意我也很少說啥了，你們有興趣的本身去作個demo放到手機上看看就一目瞭然了。
下面給你們一個demo的源代碼！java

html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>獲取設備信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
    <div id="status"></div>
    <script>
    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
        alert('本設備不支持devicemotion事件');
    }
    function deviceMotionHandler(eventData) {
        var acceleration = eventData.accelerationIncludingGravity,
            x, y, z;
        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;
        document.getElementById("status").innerHTML = "x:"+x+"<br />y:"+y+"<br />z:"+z;
    }
    </script>
</body>
</html>

就這樣，傾斜手機的時候天然就能夠看到陀螺儀的詳細參數了。根據陀螺儀的參數而後控制移動速度就能夠就能作出大地圖隨着手機偏移而滾動的效果了！jquery

移動端的touch事件

關於移動端的touch事件你們應該都有了解吧，若是不知道說明你還沒作過移動端。
總的來講就是touchstart，touchend，touchmove！
具體的你們能夠參考http://www.cnblogs.com/yexiaochai/archive/2013/10/19/3377900.html這篇博客
下面是一個簡單的判斷手指滑動方向的。ios

javascript$(op).bind("touchstart",function(ev) {
                ev.preventDefault();
                startX = ev.originalEvent.changedTouches[0].pageX;
                startY = ev.originalEvent.changedTouches[0].pageY;
                curLeft = parseInt($(ob).css("left"));
            });
            $(op).bind("touchmove",function(ev) {
                ev.preventDefault();
                endX = ev.originalEvent.changedTouches[0].pageX;
                endY = ev.originalEvent.changedTouches[0].pageY;
                X = (endX - startX) / 1.5;
            });

某些定位

由於移動設備分辨率和屏幕高寬比各有不一樣，因此有時候元素的定位就顯得很扯淡了，這時候須要在JS中去根據比例來判斷，而後JS手動的添加其left，top值。這點，算是一個比較煩的地方吧。我是在HTML中用data-xxx將其偏移量設置好，而後用jquery的data()方法和split()對其進行從新設置。另外定位中最好用百分比吧。省得由於比例的緣由在不一樣設備定位會有很大的差異。web

一些bug

在ios的safari下。設置input type=tel標籤的時候當頁面進入之後iphone會自動把數字鍵盤彈出來，這點讓我很鬱悶，沒查找到相關的解決方法，若是你知道，拜託你能告訴我，thanks~chrome
仍是在ios的safari下，明明給logo設置了position：fixed。但是滑動頁面的時候logo仍是會跑。這點也鬱悶啊。安卓和微信等等都沒有這個問題，不知道是safari的問題仍是怎麼的！windows

在iPhone下由於高分屏的緣由，裁剪的圖像須要壓縮一半顯示才行。微信

javascript//簡單的判斷apple設備
isIPhone = (/ip(hone|ad)/i.test(navigator.userAgent.toLowerCase()));

最後吐槽一下移動端的調試，windows用戶只有在手機上裝chrome而後配合電腦的chrome調試。貌似iphone配合Mac的safari能夠調試，但是我是窮屌，木有mac啊~~

我的原創，轉載請註明！

1. 移動端項目開發小結
2. 移動端項目總結
3. 項目小總結
4. 移動端動畫小結
5. vue移動端項目總結
6. Vue2移動端項目完成總結
7. 移動端項目開發總結
8. 仿移動端bilibili項目總結
9. react+redux+webpack移動端項目總結
10. Vue移動端項目總結
更多相關文章...
• Mozilla 項目 - 瀏覽器信息
• MySQL FLOAT、DOUBLE、DECIMAL（小數類型） - MySQL教程
• 算法總結-滑動窗口
• 算法總結-雙指針

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。