浅谈移动端前端页面开发

前言

外包需要,接触和学习了不少移动端的知识,在运用过程中多次碰壁,有些项目虽然完成了但是自己还是很不满意,于是在刚到家的第一天晚上决定写成文字整理自己脑中的信息,以及进行一个浅层次的科普。

移动端的特性

在写移动端项目的时候,会遇到各种不同的业务应用场景,有些需要定宽,而有些需要适应宽度进行响应式处理,有些需要滑动写死,有些需要限制点击。
移动端也是web前端的一大深坑,iOS设备统一性还好,Android设备琳琅满目而又参差不齐,WP我就不提了……(真心没做过QAQ)。在移动端进行页面开发,根据系统和软件的不同要考虑很多,比如性能上,又比如布局上,亦或是浏览器层的按钮布置/功能特性等等,在不同的场景下都是能够令人一脸懵B的。
以下是我在移动端开发中遇见过并进行了简单研究的部分内容:

  • 定宽
  • 响应式
  • 音频
  • 动画
  • canvas
  • 加载
  • 事件兼容

移动端的小技巧

开发过程中整理的一些小技巧在这里整理一下,方便自己搬砖,需要的可以伸手自提。

定宽

这个是一个非常常见的功能,很多设计稿给出的设计都是在定宽情况下制作的。大多数人选择用一个meta标签来实现这个功能,如:

<meta name="viewport" content="width=640,user-scalable=no">

但是很明显的是,不同的系统中,这个标签的写法之类也有很多讲究。伸手尝试了各路神仙的兼容代码,最终我使用的最多的是这套代码:

<script>
    var mengvalue = -1;
    var phoneWidth = parseInt(window.screen.width);
    var phoneScale = phoneWidth / 640;
    var ua = navigator.userAgent;
    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
        } else {
            document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
        }
    } else {
        document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
    }
</script>

将其放置于head结束之前即可。因为定宽的情况下,基本上一定会要求禁止缩放,所以上面也包含了相应的内容user-scalable=no,对于缩放系列的参数,关键词scale,想必也不用我赘述。
这套代码来自一直给我项目资源的大哥,在此谢过。

响应式、自适应宽度

写响应式页面的情况,一般会涉及到这个meta标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这个标签也是Bootstrap基本起步模板的默认标签之一。通过这个设置,使页面宽度等同于设备宽度,能让像素的展现更好。

在写响应式的时候,个人尝试过很多响应式策略,由大到小的兼容、由小到大的兼容、特定尺寸增删标签之类,而写法上并不够优雅。
依照个人之见,兼容移动端的响应式布局,更应该由小到大做兼容,先考虑小屏幕下的布局,再延展成宽屏大屏幕的布局。AmazeUI是一个国产的很优雅的HTML5跨屏前端框架,算是我目前使用过的体验很优良的框架,它在设计的时候正是采用了由小到大的兼容。
这种兼容常见的css写法:

@media screen and (min-width: 480px) { 
    /* something */
}

移动端音频

在移动端,比较常见的音频都是用HTML5的audio元素来实现的,包括我之前做过的一些内容的BGM也是以此元素实现。audio元素算是一个很简单的元素,建议看一下它的具体介绍和与之相关的DOM中的Audio对象的具体介绍,然后在使用的时候,操作其中的一些方法也能更加方便。
audio元素在音频播放方面有一些不足之处,iOS端的audio基本上是没有什么问题的,但是Android端中,audio元素的音频播放是不能叠加的,在你对一个audio元素进行play()的时候,其他播放的audio元素均会进入暂停状态(此时paused属性会为true)。国外对此有一些系统层级的解决策略(很高大上)但是我没(lan)有(de)去尝试所以也不好多说。这个问题目前还处于懵B阶段。

移动端动画

这里的动画指的是一些页面元件的动画效果。移动端的动画实现上,因为设备性能问题,要尽量使用CSS3进行动画而不是使用JS(血的教训)。
很多时候写CSS3动画的时候会写很多不同浏览器的兼容,举个W3School官方的例子

animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
-o-animation: myfirst 5s;   /* Opera */

这里提示一下,如果只做微信内置浏览器的兼容,只需要写正常的属性和-webkit-头的属性就能够实现了。
移动端动画有很多优秀的CSS框架,个人比较看好的是Aniamte.css,这个框架包含了各种常用动画,在此基础上能将动画的实现简单化。
而移动端的整屏滑动我极力推荐Swiper,算的上是移动端滑动、轮播一类效果的优秀解决方案。Swiper中文网中给出了非常简单的将Animate.css结合进Swiper的方法,不妨尝试一下。

移动端canvas

canvas上我目前只用过CreateJS,这也是目前Flash CC转身反杀华丽逆袭的一大杀器。整体上CreateJS算是非常轻量级的一款canvas动画/游戏框架,我之前也多次提到过这货。但是对于SoundJS和PreloadJS我的使用能力仍然有很大问题。
在CreateJS(以下简称cjs)的使用中,性能是一个很重要的点。手机端的图形绘出应该很多人踩进坑里过,不同机型能达到的性能真的差非常非常多。所以在使用cjs制作手机端的动画效果或者游戏的时候,要注意尽量减少遍历和整体的重绘,增加局部重绘,以及能用CSS3实现的动画功能千万避免用js。
同样能够生产出H5动画游戏的Cocos2d-x的js语言版,面对cjs下,性能可以说各有千秋。这篇文章中对于二者的性能比较是测试的相对不错的,引用文章中的一句话就是:

cocos2d-js框架提供的UI编辑器、粒子系统、骨骼动画、瓦片地图等等,都是createjs这个轻量级选手不具备的,createjs只能从零开始,一切都得靠开发者自行实现。因此,cocos2d-js更适合做中大型游戏(大型指的是游戏画面复杂程度,而不是渲染要求高),而createjs更适合做小游戏,例如神经猫级别。

加载

移动端可能会面对很多图片,处理加载项、有一个合理的加载动画就很重要。
目前我的加载流是抄的代码,其中主要用到的是createjs.LoadQueue,因为尚不够完好,所以这里先不贴代码出来,有兴趣的可以邮件/QQ我研究下。
对于移动端的加载我觉得这几点值得注意:

  • 图片和代码体积:用到的非高清图片进行压缩,我使用了工具TinyPNG;代码压缩直接放在gulp的处理流里面
  • loading:加载时间过长的时候,需要有一个loading的界面。目前没写过什么好用的loading层(也没设计出什么不错的),所以还是用的别人的开源的CSS3加载动画。
    在加载的内容比较多的时候,强烈建议加一个进度条,这就跟追女朋友一样,没有一个进度条是很容易放弃继续加载的。
  • 静态资源位置优化:我使用的是upyun,用了很久了,个人觉得非常不错。七牛据说也是不错的,但是没用过,个人觉得它口碑非常不错,不做过多评价。

加载这一点上要多花一点功夫,个人作品的话,一个加载的工具/套件写好了就能一劳永逸了。

事件兼容

感谢前人一路走来为我们留下了那么多优秀的框架!
移动端最该注意的就是点击事件的改变,click变成了一系列的touch
框架上,用过Touch.js,它是移动设备上的手势识别与事件库,由百度云Clouda团队维护。但是后来使用Swiper之后,对事件的考虑并不是很多,只是在之前写canvas游戏的时候使用过。

总结

移动端的水很深,要做移动端就说明要面对更多型号尺寸,也说明要面对的操作系统变得更加丰富。一直用Chrome的开发者工具进行移动端调试,成功之后才放到移动端做真实测试,有的时候对性能的掌握非常不好,要多加小心。
移动端不像PC端,没有控制台显示错误的抛出,所以我也见过开发者为了调试移动端的一些问题,不惜放上大量的alert命令。这里我安利一下jsConsole,可以通过这个在线工具,将移动端的控制台信息全部输出到测试者这里,非常好用。

总而言之,进行移动端开发,多站在用户和低性能机的角度考虑问题、设计流程,会对整个项目更加友好。以上只是我在初入移动端这潭深水的时候总结的一些低端技术点,有错误请直接指出,感谢各位同好Q3Q。

标签: none

已有 3 条评论

  1. 菊苣www

  2. James James

    Chào các bạn ,
    muốn nén hình ảnh của bạn một cách dễ dàng mà không mất chất lượng, chỉ cần kiểm tra trang web này https://optimizejpeg.com/.

  3. James James

    嗨朋友,
    想要轻松压缩你的图片而不损失质量,只要看看这个网站https://optimizejpeg.com/。

添加新评论