移动端小项目的小总结~

最新推荐文章于 2021-11-09 20:16:18 发布

weixin_34007886

最新推荐文章于 2021-11-09 20:16:18 发布

阅读量90

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000002644627

版权

最近在做移动端的动画，其中还是碰到了很多的坑，在此记录一下。作为一个备忘！

关于移动设备的不同屏幕分辨率

第一次做web app，前真的从来没做过移动端，真心感觉移动端还是也不容易啊。说说不同分辨率的处理方案吧。我采用的是最坑爹醉无语的缩放来解决的，定义了以iPhone4为基准的最小屏幕比（320*450），以此在JS进行判断设备的比例，选取最大的那个然后来进行缩放。以此来适应不同的屏幕！

关于设备的摇晃

项目一来第一页就是一个大地图，然后设备左右摇晃的时候地图随之滚动显示！
以前从来没接触这玩意。根本就不知道有这么个API。好吧，任务安排到这儿了。只有硬着头皮去查询了。搞了半天是event.accelerationIncludingGravity这玩意。

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的源代码！

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>

就这样，倾斜手机的时候自然就可以看到陀螺仪的详细参数了。根据陀螺仪的参数然后控制移动速度就可以就能做出大地图随着手机偏移而滚动的效果了！

移动端的touch事件

关于移动端的touch事件大家应该都有了解吧，如果不知道说明你还没做过移动端。
总的来说就是touchstart，touchend，touchmove！
具体的大家可以参考http://www.cnblogs.com/yexiaochai/archive/2013/10/19/3377900.html这篇博客
下面是一个简单的判断手指滑动方向的。

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()对其进行重新设置。另外定位中最好用百分比吧。免得因为比例的原因在不同设备定位会有很大的差别。

一些bug

在ios的safari下。设置input type=tel标签的时候当页面进入以后iphone会自动把数字键盘弹出来，这点让我很郁闷，没查找到相关的解决方法，如果你知道，拜托你能告诉我，thanks~
还是在ios的safari下，明明给logo设置了position：fixed。可是滑动页面的时候logo还是会跑。这点也郁闷啊。安卓和微信等等都没有这个问题，不知道是safari的问题还是怎么的！

在iPhone下因为高分屏的原因，裁剪的图像需要压缩一半显示才行。

javascript//简单的判断apple设备
isIPhone = (/ip(hone|ad)/i.test(navigator.userAgent.toLowerCase()));

最后吐槽一下移动端的调试，windows用户只有在手机上装chrome然后配合电脑的chrome调试。貌似iphone配合Mac的safari可以调试，可是我是穷屌，木有mac啊~~

个人原创，转载请注明！

weixin_34007886

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端小项目的小总结~

最近在做移动端的动画，其中还是碰到了很多的坑，在此记录一下。作为一个备忘！关于移动设备的不同屏幕分辨率第一次做web app，前真的从来没做过移动端，真心感觉移动端还是也不容易啊。说说不同分辨率的处理方案吧。我采用的是最坑爹醉无语的缩放来解决的，定义了以iPhone4为基准的最小屏幕比（320*450），以此在JS进行判断设备的比...
复制链接

扫一扫