移动端专题系列（三）移动端优化

发表于 | 分类于

因为是移动端，所以更要注重优化。不要做出好的效果别人却看不了。

##事件
移动端就不要再去使用click等pc端的事件了。借助与zepto拓展，可以实现tap,swipeLeft等移动端的事件。

##运动

  1. 需要操作left,top值进行位移的动画，尽量换成操作translateX,translateY.布局时候也是优先考虑用translate。比如定位的元素居中可以这么写:
    1
    2
    3
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

##横屏
一般移动端是针对竖屏的展示，但是手机都有横屏，而且很多人开启了横屏。横屏情况下一团糟的体验是真不好的。这里给出两种方案：

  1. 兼容横屏。适合与页面元素不是很多的情况下。或者是专门为横屏做一套效果。京东的618宣传就是横屏的页面。
  2. 给友好的提示。监听横屏的事件，给用户提示，高度用户不要横屏下使用。
1
2
3
4
5
6
7
8
9
10
11
// 横屏监听
var updateOrientation = function() {
    if (window.orientation == '-90' || window.orientation == '90') {
        $('.preload').removeClass('hide');
        //alert('您的抽奖姿势不太对，请将手机竖着放~');
    } else {
        $('.preload').addClass('hide');
        // alert('竖屏状态');
    }
};
window.onorientationchange = updateOrientation;