移动端小项目的小总结~

时间 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教程
• 算法总结-滑动窗口
• 算法总结-双指针