3. 二维码图片使用 img 标签引入

二维码图片不要写为元素背景,不然长按没有办法触发扫描功能。应使用 img
标签引入,如下:

JavaScript

![](images/qrcode.png)

1
![](images/qrcode.png)

2. 标题简短

移动端浏览器导航条宽度有限,简短的标题可以使其展示完整。

7. 图片压缩

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

在线的 Tinypng 可以无限次使用,如果想要使用其
API 来进行压缩自动化的话,可以使用
gulp-tinypng
等插件,但是有每月压缩图片数量限制,每月前500张图片免费,其他收费情况参考官网说明。使用其
API 还需要获取 API
Key,这里可以获取。
个人觉得想要免费的话使用 API
会有数量限制,时刻惦记着数量有点心累,不如直接使用在线工具,也不麻烦~

5. 使用 Gulp 拼合图片

如果打算先布局,后使用自动化工具将图片拼起来,减少请求数,需要注意:在编写
CSS
的时候,图片宽高应固定,图片拼合后才能通过定位和显示区域的宽高来展示图片。

举个例子,如果布局时 width: 100%; background-position: center;,使用工具拼合图片后,该元素区域(100%
的宽度)内会将其他图片显示出来,这不是我们想要看到的。

9. CSS 动画属性前缀 webkit

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

CSS

-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) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
-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)
    }
}

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

3. 二维码图片使用 img 标签引入

二维码图片不要写为元素背景,不然长按没有办法触发扫描功能。应使用 img 标签引入,如下:

![](images/qrcode.png)

5. 使用 Gulp 拼合图片

如果打算先布局,后使用自动化工具将图片拼起来,减少请求数,需要注意:在编写
CSS
的时候,图片宽高应固定,图片拼合后才能通过定位和显示区域的宽高来展示图片。

举个例子,如果布局时
width: 100%; background-position: center;,使用工具拼合图片后,该元素区域(100%
的宽度)内会将其他图片显示出来,这不是我们想要看到的。

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

设计常用尺寸:7501334 / 6401134,包含了手机顶部信号栏的高度。

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

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

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

如果页面已经写好了,就只能按照上面的尺寸进行内容的调整了,缩小元素间距,缩放图片大小等。
分享下我的失败尝试:

  1. 如果对整个页面进行缩放(使用 meta
    标签),按照设计稿的比例,在高度满足的情况下宽度会偏小,两边会有白底;
  2. 就算使用 rem
    作为相关间距的单位,也没有办法找到一个合适的比例在两种高度(微信/QQ)下切换,因此统一调成适配
    QQ
    的,这样就算在微信下有多余的空白,固定底部的引导下滑箭头也能使其不会过于突兀。

图片 1

750*1334 页面示例

移动端H5页面注意事项

2017/02/18 · HTML5 ·
移动端

原文出处: Alexee   

9. CSS 动画属性前缀 webkit

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

-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)
    }
}

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

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

设计常用尺寸:7501334 / 6401134,包含了手机顶部信号栏的高度。

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

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

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

如果页面已经写好了,就只能按照上面的尺寸进行内容的调整了,缩小元素间距,缩放图片大小等。
分享下我的失败尝试:

  1. 如果对整个页面进行缩放(使用 meta
    标签),按照设计稿的比例,在高度满足的情况下宽度会偏小,两边会有白底;
  2. 就算使用 rem
    作为相关间距的单位,也没有办法找到一个合适的比例在两种高度(微信/QQ)下切换,因此统一调成适配
    QQ
    的,这样就算在微信下有多余的空白,固定底部的引导下滑箭头也能使其不会过于突兀。

图片 2

750*1334 页面示例

8. 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")
        $(".percent").text(percent+'%');

        // 加载结束后,隐藏相应的 loading 或遮罩 
        if(percent==100) {
            $(".mask").css('display','none');
        }
    });
}

// 执行 loading 方法
loading();

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图