图片 6

移动端H5页面注意事项

挪动端H5页面注意事项

2017/02/18 · HTML5 ·
移动端

原版的书文出处: Alexee   

2017-11-25 更新:5. 选拔 Gulp 拼合图片

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

规划常用尺寸:7501334 / 6401134,包罗了手提式有线话机最上部时限信号栏的惊人。

运动端H5移动页面日常供给能够享受到各样社交App中,常用的有微信、QQ等。

利用移动设备查看页面时会发掘,在Wechat浏览器中有最上端导航栏,在qq内置浏览器里穿梭有顶上部分导航,尾部也许有操作栏(safari浏览器也后生可畏律卡塔尔国,那几个都会占领设计稿展现区域,因而在
两全环节
就必要思索内容的略微,页面尾部要留住一定的空白,那样在Wechat或qq中才不会被遮住。

如下图(QQ内置浏览器卡塔 尔(阿拉伯语:قطر‎:页面设计尺寸为 7501334,顶端攻克150px,底部占用 110px,共占用了 260px,由此设计稿内容应调整在
1334-260=1074px 的可观内。编写代码时,使用 Chrome
浏览器模拟设施大小,将该尺寸(**750
1074**卡塔 尔(英语:State of Qatar)存下来,用于实时查看移动端页面效果。

只要页面已经写好了,就只好遵照上边的尺码举行内容的调治了,减弱成分间隔,缩放图片大小等。
分享下本人的失利尝试:

  1. 只要对任何页面进行缩放(使用 meta
    标签卡塔尔,遵照设计稿的比重,在中度满意的动静下升幅会偏小,两侧会有白底;
  2. 纵然使用 rem
    作为相关间隔的单位,也未尝章程找到二个老少咸宜的百分比在两种高度(微信/QQ卡塔 尔(阿拉伯语:قطر‎下切换,因而统大器晚成调成适配
    QQ
    的,那样固然在Wechat下有多余的空白,固定底部的指点降落箭头也能使其不会过分突兀。

图片 1

750*1334 页面示例

规划常用尺寸:750 x 1334 / 640 x 1134,饱含了手机顶端非实信号栏的冲天。

2. 题名简短

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

运动端H5活动页面日常供给可以享受到各类社交App中,常用的有 微信、QQ
等。

3. 二维码图片采纳 img 标签引进

二维码图片不要写为因素背景,不然长按未有主意触发扫描功效。应运用 img
标签引进,如下:

JavaScript

![](images/qrcode.png)

1
![](images/qrcode.png)

接收移动设备查看页面时会开掘,在Wechat浏览器中有顶端导航栏,在qq内置浏览器里不停有
最上端导航,底部也许有
操作栏(safari浏览器也一直以来卡塔 尔(英语:State of Qatar),那一个都会占用设计稿突显区域,因而在
安排环节 就要求思考内容的有一点点,页面尾部要
留住一定的空白,那样在Wechat或qq中才不会被遮住。

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

偶然扫描二维码之后,会跳转至有些地方,不幸的话QQ或许Wechat会对这些地方实行友好提示,如下图所示:

图片 2

QQ内的投机提醒

这般会阻止部分客户继续访谈,进而无法很好的将客商教导到活动想要推广的出品/品牌页面,如
App 的下载页面等。因而二维码的扫视测验无法少。

举个例证,就算二维码扫描结果是运用的下载地址的话,能够利用应用宝的微下载地址来生成二维码,这是不会被“温馨提示”的。

如下图:页面设计尺寸为 750 x 1334,顶端占用 150px,后面部分占用
110px,共占用了 260px,因而设计稿内容应调整在 1334-260=1074px
的可观内。编写代码时,使用 Chrome
浏览器模拟设施大小,将该尺寸(*7501074卡塔 尔(阿拉伯语:قطر‎存下来,用于实时查看移动端页面效果。

5. 用到 Gulp 拼合图片

要是策画先布局,后选择自动化学工业具将图片拼起来,缩短须要数,须求注意:在编辑
CSS
的时候,图片宽高应固定,图片拼合后才干经过一定和彰显区域的宽高来呈现图片。

比如,假如布局时
width: 100%; background-position: center;,使用工具拼合图片后,该因素区域(百分之百的宽窄卡塔 尔(阿拉伯语:قطر‎内会将别的图片展示出来,那不是我们想要见到的。

即便页面已经写好了,就只好依照上面包车型大巴尺码实行内容的调度了,裁减成分间隔,缩放图片大小等。

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 压缩过的图纸卡塔 尔(英语:State of Qatar)80.7 KB => 38.1
KB
,可以知道光使用自动化学工业具来减弱是非常不够的,大多数图片仍存在很大的减少空间,能够再扔到
Tinypng 里压缩一下寻访。

在线的 Tinypng 能够Infiniti次使用,假如想要使用其
API 来开展减削自动化的话,可以动用
gulp-tinypng
等插件,不过有每月裁减图片数量约束,每月前500张图片无需付费,别的收取费用景况参谋官网表明。使用其
API 还索要获得 API
Key,这里可以拿到。
个体认为想要不收费的话使用 API
会有数量约束,时刻牵挂着数量有一茶食累,不及直接选拔在线工具,也不劳动~

  1. 如若对全部页面进行缩放(使用 meta
    标签卡塔 尔(英语:State of Qatar),遵照设计稿的比例,在高度满意的气象下上涨的幅度会偏小,两边会有白底;
  2. 就算使用 rem
    作为相关间隔的单位,也尚无艺术找到叁个切合的比例在二种高度下切换,由此统生龙活虎调成适配
    QQ
    的,这样即便在Wechat下有多余的空白,固定尾巴部分的引导降落箭头也能使其不会过度突兀。

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财报
前年轻人花花花钱大告诉

1 赞 8 收藏
评论

图片 4

二维码图片不要写为要素背景,不然长按未有主意触发扫描功用。应运用 img
标签引进,如下:

图片 5代码示例.png

不经常扫描二维码之后,会跳转至有些地方,不幸的话QQ或然Wechat会对这些地址进行协调提示,如下图所示:

图片 6QQ内的和谐提醒

那般会阻碍部分客商继续拜访,进而不或许很好的将客户教导到移动想要推广的出品/品牌页面,如
App 的下载页面等。由此二维码的扫视测量检验无法少。

举个例子,要是二维码扫描结果是使用的下载地址的话,可以选取应用宝的微下载地址来生成二维码,那是不会被“温馨指示”的。

设若考虑先布局,后接收自动化工具(如:gulp-sprite-generator2卡塔尔国将图片拼起来(即经过
css 生成Smart图卡塔尔,收缩恳求数,须要潜心:在编辑 CSS
的时候,图片宽高应固定,图片拼合后技巧透过固定和彰显区域的宽高来显示图片。

举个例子,若是布局时
width: 100%; background-position: center;,使用工具拼合图片后,该因素区域内会将其余图片显示出来,那不是大家想要看见的。

建议先将图纸拼起来再布局,可以采纳:gulp.spritesmith,一步获取合并的Smart图和呼应的
css 文件。

2017-11-25 更新:推荐贰个自制的 Electron 客商端工具
Splice(集合了常用的 gulp 插件,包含上述的两种Smart图变化插件卡塔尔国。

补给多个关于采用Smart图的主题素材:

  1. 将多张图纸通过工具生成Smart图和 css
    文件
    :如若您转移精灵图时相当大心使用了再也的图样(文件夹里存在重新的图纸不一致的名字卡塔 尔(阿拉伯语:قطر‎,在手机上会现身图片大小地点都出错的情景,固然电脑浏览器里健康。解决:去掉那张重复的图片重新生成三次Smart图和
    css 就好了。
  2. 直接通过 css
    文件生成精灵图
    :制作手提式有线电话机端的活动页面时,日常索要翻页的成效,能够的话最佳每一种页面包车型大巴图样拼成一张Smart图(工具提供正则筛选图片路径的功力卡塔尔。尽量不要将全体页面包车型大巴图样统一拼成一张,如果您拼完没难题也固然了,不过作者那边遇见过同地点第一点相像的标题,手提式有线电话机上页面效果出错。解决:最后每种审核不出难点,通过将三个页面包车型客车图片分成三张Smart图才勉强迈过难关。

风流洒脱旦将页面链接直接复制分享给别的人,在三哥大上抽出链接音讯的客商恐怕会见到链接的相关音信,如页面题目、描述和图纸。相关新闻设置方法如下:

<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 创设的滑动特效插件,面向手提式有线电话机、GALAXY Tab等移动终端。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青年花花花钱大告诉

发表评论

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