香港六马会开奖结果-六合彩特码资料-本港台最快开奖直播

[2019]让您放心游戏,提供六合彩特码资料最丰厚回馈!,本港台最快开奖直播是为您电脑安全以及资金安全的考虑,所以说压实向感受娱乐首先应该进下载时必不可少的。

移动端H5页面注意事项
分类:本港台最快开奖直播

一举手一投足端H5页面注意事项

2017/02/18 · HTML5 · 移动端

原稿出处: Alexee   

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

安排常用尺寸:7501334 / 6401134,包涵了手提式有线电话机顶端时限信号栏的可观。

移动端H5活动页面平常要求能够享用到各类社交App中,常用的有Wechat、QQ等。

使用移动设备查看页面时会发掘,在Wechat浏览器中有顶端导航栏,在qq内置浏览器里持续有顶上部分导航,尾巴部分也可能有操作栏(safari浏览器也风流倜傥律卡塔尔国,那些都会据有设计稿彰显区域,因而在 设计环节 就须要考虑内容的有个别,页面底部要预先留下一定的空域,那样在Wechat或qq中才不会被遮住。

如下图(QQ内置浏览器卡塔尔国:页面设计尺寸为 7501334,顶端占有150px,尾巴部分占用 110px,共占用了 260px,由此设计稿内容应调节在 1334-260=1074px 的冲天内。编写代码时,使用 Chrome 浏览器模拟设施大小,将该尺寸(**7501074**卡塔尔国存下来,用于实时查看移动端页面效果。

假诺页面已经写好了,就只可以依照下边包车型客车尺码进行内容的调度了,减弱成分间隔,缩放图片大小等。
享受下本身的波折尝试:

  1. 若果对整个页面进行缩放(使用 meta 标签卡塔 尔(英语:State of Qatar),依据设计稿的比重,在中度满意的状态下上涨的幅度会偏小,两侧会有白底;
  2. 固然使用 rem 作为相关间隔的单位,也从没主意找到三个确切的百分比在三种高度(Wechat/QQ卡塔尔下切换,由此统大器晚成调成适配 QQ 的,那样纵然在微信下有多余的空白,固定尾部的辅导降落箭头也能使其不会超负荷突兀。

图片 1

750*1334 页面示例

2. 题名简短

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

3. 二维码图片选用 img 标签引进

二维码图片不要写为成分背景,否则长按未有主意触发扫描成效。应利用 img 标签引进,如下:

JavaScript

![](images/qrcode.png)

1
![](images/qrcode.png)

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

突发性扫描二维码之后,会跳转至有个别地方,不幸的话QQ可能Wechat会对那几个地址举行协和提醒,如下图所示:

图片 2

QQ内的亲善提示

这么会阻碍部分顾客继续访谈,进而不能够很好的将客户指导到移动想要推广的制品/品牌页面,如 App 的下载页面等。因而二维码的扫描测验不可能少。

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

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 会有数量节制,时刻思量着数量有一点点心累,不及直接动用在线工具,也不费力~

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();

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 收藏 评论

图片 3

本文由香港六马会开奖结果发布于本港台最快开奖直播,转载请注明出处:移动端H5页面注意事项

上一篇:引入十个HTML5游戏网址 下一篇:没有了
猜你喜欢
热门排行
精彩图文