微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

移动端H5页面注意事项

2017-02-26 20:18 前端大全

(点击上方公众号,可快速关注)


作者: Alexee

www.jianshu.com/p/e95824e8fe13

如有好文章投稿,请点击 → 这里了解详情


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 的,这样就算在微信下有多余的空白,固定底部的引导下滑箭头也能使其不会过于突兀。


750*1334 页面示例


2. 标题简短


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


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


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


![](images/qrcode.png)


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


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


QQ内的温馨提醒


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


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


5. 使用 Gulp 拼合图片


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


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


6. 关于链接的分享-QQ


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


<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


代码段分享,拿走即用~


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 前缀一定记得加,要不然在某些手机下动画效果是没有的。

如下:


-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。



看完本文有收获?请转发分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 前端必备,十大热门的 JavaScript 框架和库 promises 很酷,但很多人并没有理解就在用了 趣图:调 CSS 的真实写照 移动端 h5开发相关内容总结——CSS篇 移动端 h5开发相关内容总结——CSS篇
猜您喜欢 MySQL Join算法与调优白皮书(二) 传输网建设 Linux多安全策略和动态安全策略框架模块详细分析之核心代码注释 【老王有约】一封来自华南运维圈的邀请函 Java神器BTrace,从入门到熟练小工的手册