澳门金莎娱乐网站移动端H5页面注意事项

时间:2019-11-23 18:05来源:网页制作
移动端H5页面注意事项 2017/02/18 · HTML5 ·移动端 原文出处: Alexee    2017-11-25 更新 :5. 使用 Gulp 拼合图片 1. 单个页面内容不能过多 设计常用尺寸:750 1334 / 640 1134,包含了手机顶部信号

移动端H5页面注意事项

2017/02/18 · HTML5 · 移动端

原文出处: Alexee   

2017-11-25 更新:5. 使用 Gulp 拼合图片

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

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

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

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

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

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

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

澳门金莎娱乐网站 1

750*1334 页面示例

设计常用尺寸:750 x 1334 / 640 x 1134,包含了手机顶部信号栏的高度。

2. 标题简短

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

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

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

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

JavaScript

![](images/qrcode.png)

1
![](images/qrcode.png)

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

4. 二维码图片记得扫描测试

有时候扫描二维码之后,会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒,如下图所示:

澳门金莎娱乐网站 2

QQ内的温馨提醒

这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,如 App 的下载页面等。因此二维码的扫描测试不能少。

举个例子,如果二维码扫描结果是应用的下载地址的话,可以使用应用宝的微下载地址来生成二维码,这是不会被“温馨提醒”的。

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

5. 使用 Gulp 拼合图片

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

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

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

6. 关于链接的分享-QQ

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

XHTML

<title>QQ中链接的标题由此处获取</title> <meta name="description" content="QQ中链接的描述由此处获取"> <!-- QQ默认获取的图片有可能出现缩放问题,效果不佳,可以通过如下方法进行设置 --> <meta itemprop="image" content="" />

1
2
3
4
<title>QQ中链接的标题由此处获取</title>
<meta name="description" content="QQ中链接的描述由此处获取">
<!-- QQ默认获取的图片有可能出现缩放问题,效果不佳,可以通过如下方法进行设置 -->
<meta itemprop="image" content="http://*.*.com/static/images/share.png" />

可参考 手机QQ接口文档:setShareInfo。

问题:即使使用了如上的 image 设置方法,还是没能显示预期图片?
解决:确定下你发送的链接格式,会不会有所省略,如:somedomain/ 或者 somedomain/index,正确的应为 somedomain/index.html,才能正确解析到图片。

如果是打开链接后,在QQ内置浏览器里选择将页面分享出去,那一般不会出错。

分享下我的失败尝试:

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 会有数量限制,时刻惦记着数量有点心累,不如直接使用在线工具,也不麻烦~

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

8. Loading

代码段分享,拿走即用~

JavaScript

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([ // 将所有需要加载的图片地址写于此处 "", "", "", "", "", "", "" ],function(percent){ // 假设显示百分比的元素为 $(".percent") $(".percent").text(percent+'%'); // 加载结束后,隐藏相应的 loading 或遮罩 if(percent==100) { $(".mask").css('display','none'); } }); } // 执行 loading 方法 loading();

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
31
32
33
34
35
36
37
38
39
40
41
42
43
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();

澳门金莎娱乐网站 3750*1334 页面示例

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。

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

参考

途牛Q2财报
2017年轻人花花花钱大报告

1 赞 8 收藏 评论

澳门金莎娱乐网站 4

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

澳门金莎娱乐网站 5代码示例.png

有时候扫描二维码之后,会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒,如下图所示:

澳门金莎娱乐网站 6QQ内的温馨提醒

这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,如 App 的下载页面等。因此二维码的扫描测试不能少。

举个例子,如果二维码扫描结果是应用的下载地址的话,可以使用应用宝的微下载地址来生成二维码,这是不会被“温馨提醒”的。

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

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

建议先将图片拼起来再布局,可以使用:gulp.spritesmith,一步获取合并的精灵图和对应的 css 文件。

2017-11-25 更新:推荐一个自制的 Electron 客户端工具 Splice(集合了常用的 gulp 插件,包括上述的两种精灵图生成插件)。

补充两个关于使用精灵图的问题:

  1. 将多张图片通过工具生成精灵图和 css 文件:如果你生成精灵图时不小心使用了重复的图片(文件夹里存在重复的图片不同的名字),在手机上会出现图片大小位置都出错的情况,虽然电脑浏览器里正常。解决:去掉那张重复的图片重新生成一次精灵图和 css 就好了。
  2. 直接通过 css 文件生成精灵图:制作手机端的活动页面时,经常需要翻页的效果,可以的话最好每个页面的图片拼成一张精灵图(工具提供正则筛选图片路径的功能)。尽量不要将所有页面的图片统一拼成一张,如果你拼完没问题也就算了,但是我这边遇到过同上面第一点一样的问题,手机上页面效果出错。解决:最后排查不出问题,通过将多个页面的图片分成三张精灵图才勉强度过难关。

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

<title>QQ中链接的标题由此处获取</title><meta name="description" content="QQ中链接的描述由此处获取"><!-- QQ默认获取的图片有可能出现缩放问题,效果不佳,可以通过如下方法进行设置 --><meta itemprop="image" content="http://*.*.com/static/images/share.png" />

可参考 手机QQ接口文档:setShareInfo。

问题:即使使用了如上的 image 设置方法,还是没能显示预期图片?解决:确定下你发送的链接格式,会不会有所省略,如:somedomain/ 或者 somedomain/index,正确的应为 somedomain/index.html,才能正确解析到图片。

如果是打开链接后,在QQ内置浏览器里选择将页面分享出去,那一般不会出错。

使用自动化工具 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 会有数量限制,时刻惦记着数量有点心累,不如直接使用在线工具,也不麻烦~

首屏 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+'%'); // 加载结束后,隐藏相应的 loading 或遮罩 if(percent==100) { $.css('display','none'); } });}// 执行 loading 方法loading();

使用 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; transform: translateZ }}@keyframes f { 0% { opacity: 0; -webkit-transform: translate3d(750px,0,0); transform: translate3d(750px,0,0) } to { opacity: 1; -webkit-transform: translateZ; transform: translateZ }}

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

你只需要 Swiper.js 和 Animate.css 即可打造移动端 H5 活动页面~Swiper 是纯 javascript 打造的滑动特效插件,面向手机、平板电脑等移动终端。Animate.css 是纯 CSS 编写而成的动画库,包含多种常见的 CSS 动画。引用 Swiper.js,同时在 Animate.css 中寻找需要的动画效果复制粘贴进 css 文件即可,完全不必引用 Animate.css。

<!-- 以下代码默认设计稿尺寸为 640 x 1134 --><meta content="width=device-width, user-scalable=yes,initial-scale=1" name="viewport" /><script> var detectBrowser = function { if(navigator.userAgent.toLowerCase().indexOf > -1) { return true; } else { return false; } }; var width = parseInt(window.screen.width); var scale = width/640; // 根据设计稿尺寸进行相应修改:640=>? var userScalable = 'no'; if(detectBrowser userScalable = 'yes'; document.getElementById('viewport').setAttribute( 'content', 'target-densitydpi=device-dpi,width=640,user-scalable='+userScalable+',initial-scale=' + scale); // 这里也别忘了改:640=>?</script>

利用 meta 标签对页面进行缩放,使得我们可以直接根据设计稿来进行页面的编写,不用再进行单位的换算等等,省却了很多麻烦。

01:同一个页面里要是有两个二维码,长按扫描总是只能扫出 左侧/第一个 二维码。解决:可视区域内只能出现一个二维码。

02:使用 meta 标签缩放页面后长按二维码图片无反应。解决:使用了以下代码之后,就能长按识别二维码了~

<!--同一张二维码图片--><!--下面这张 opacity 为 0,隐藏起来,但是实际存在,并且宽为 100%,屏幕有多大就多大-->< img style="right:0; top:0; height: auto;width: 100%;opacity: 0;position: absolute;" src="二维码图片地址"><!--下面这张是呈现给用户看的-->< img src="二维码图片地址" title="qrcode" alt="qrcode"><!--PS: img 标签前面的空格记得去掉,这里加上空格是因为简书有 bug,针对 img 标签代码渲染会出错-->

途牛Q2财报2017年轻人花花花钱大报告

编辑:网页制作 本文来源:澳门金莎娱乐网站移动端H5页面注意事项

关键词: