移动端 H5 页面注意事项

1.单个页面内容不能过多

设计常用尺寸：750X1334 或者 640X1334,包含了手机顶部信号栏的高多。

移动端H5活动页面常常需要能够分享到各种社交App中，常用的有微信、qq等。

使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏，在qq内置浏览器里不止有顶部导航，底部也有操作栏（safari浏览器也一样），这些都会占用设计稿显示区域，因此在设计环节就需要考虑内容的多少，页面底部要预留一定的空白，这样在微信或qq中才不会被遮住。

如写图（qq内置浏览器）：页面设计尺寸为750X1334，顶部占用150px，底部占用110px，共占用了260px，因此设计稿内容应控制在1334-260=1074px的高度内。编写代码时，使用chrome浏览器模拟设备大小，将该尺寸（750X1074）存下来，用于实时查看移动端页面效果。

2.关于链接的分享-QQ

　如果将页面链接直接复制分享给其他人，在手机上接收链接消息的用户可能会看到链接的相关信息，如页面标题、描述和图片。相关信息设置方式如下：　

<title>QQ中链接的标题由此处获取</title>
<meta name="description" content="QQ中链接的描述由此处获取">

<meta itemprop="image" content="http://*.*.com/static/images/share.png" />

 

3. 图片压缩

使用自动化工具 gulp-imagemin（教程） 来压缩图片，效果举例：101 KB => 80.7 KB。后来我使用了在线工具 Tinypng 又进行了一次压缩，效果举例：（上面使用 gulp-imagemin 压缩过的图片）80.7 KB => 38.1 KB，可见光使用自动化工具来压缩是不够的，大部分图片仍存在较大的压缩空间，可以再扔到 Tinypng 里压缩一下看看。

4. Loading

function loading(){

    function Load(){}

    Load.prototype.loadImgs = function(urls,callback) {
        this.urls = urls;
        this.imgNumbers = urls.length;
        this.loadImgNumbers = 0;
        var that =this;
        for(var i=0;i<urls.length;i++){
            var obj = new Image();
            obj.src = urls[i];
            obj.onload = function(){
                that.loadImgNumbers++;
                callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100));
            }
        }
    };

    var loader = new Load();

    loader.loadImgs([

        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png"
    ],function(percent){

        $(".percent").text(percent+'%');

        if(percent==100) {
            $(".mask").css('display','none');
        }
    });
}

loading();

5. CSS 动画属性前缀 webkit

使用 CSS3 来制作动画效果的话，webkit 前缀一定记得加，要不然在某些手机下动画效果是没有的。 如下

推荐使用自动化工具来处理未加前缀的 CSS 文件，如 gulp-autoprefixer。

-webkit-animation: f .8s 2s forwards ease-in-out;
animation: f .8s 2s forwards ease-in-out;

@-webkit-keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}