webapp 开发进阶之CSS 渲染等功能的实现-职坐标

webapp 开发进阶之CSS 渲染等功能的实现

白羽 2018-06-26 来源：网络阅读 749 评论 0

摘要：本文将带你了解webapp 开发进阶之CSS 渲染等功能的实现，希望本文对大家学WEBAPP有所帮助。

App 图标
苹果从IOS4.2开始mobile safari就开始支持把网页保存至主屏，从而使得用户可以方便的从主屏的快捷方式进入webapp，而通过苹果提供给我们的API我们可以使得 webapp 像原生app 一样拥有自己的icon。

对于多设备的多分辨率，苹果提供了sizes这个属性。如果不指定这个属性，默认 sizes 会是57 * 57。
对应 apple-touch-icon 苹果还有另外一个属性 apple-touch-icon-precomposed ，他们的不同之处在于使用 apple-touch-icon-precomposed 属性的时候，苹果不会给桌面图标加一个高光效果。

App StartUp Image
苹果 IOS 3.0以后就支持 Startup Image 属性，webapp 在苹果手机上可以给网页指定StartUp Image，使得当webapp从主屏打开时，设为StartUp的封面图片会首先出现，类似原生app。但是苹果对于指定的图片有些限制，必须满足大小。对于 iphone 和 itouch 图片的尺寸只能是 320 x 460 ，其他大小的都无效。但是你可以通过sizes 来进行多设备适配。

隐藏地址栏
IOS 下想要进入全屏模式，并且不再出现地址栏和屏幕底下的操作菜单，可以通过 apple-mobile-web-app-capable 属性来实现

目前以上和保存到主屏相关的大多属性都是iPhone only，如果你感兴趣这里有更详细的说明。

Display 显示
为了适应网页在设备屏幕上的显示,需要通过设置 viewport 的大小来使得网页更适应在设备上阅读。如果仅仅是适应阅读，下列代码第一条就能满足，如果要防止用户在使用webapp时的放大手势操作和缩小手势则需要通过设置user-scalable、其初始化的放大倍数、最大放大倍数和最小缩小倍数来实现。

CSS 渲染
在IOS 或是 andriod上系统自带的都是webkit内核的浏览器，比起在web端饱受微软IE6之苦的程序员来说，webapp确实看似美好了许多。然而毕竟手机端不比PC端，许多渲染小细节不注意，往往会导致这个页面的顿挫感甚至crash。有几个CSS属性值得注意：

-webkit-box-shadow-webkit-border-radius-webkit-gradient

在webapp 上，虽说button渐变色，圆角，阴影不再难实现，但是对于CSS渲染来说，这些属性都是高耗品。在项目中对大片的元素使用圆角，和大片元素使用阴影能够明显的感觉到页面滚动的顿挫感。然而过于重度使用绝对定位或是相对定位也会使得浏览器不堪重负而崩溃。这点在mobile safari 上体现的非常明显，所以也尽量少使用绝对定位来完成布局。

position:absolute;

position:relative;

CSS3 动画
webapp 相比传统wap2.0 页面，多媒体和交互上面都有着传统wap远不能及的表现力。native app 虽然在这点上表现十分抢眼，却不如webapp的多平台性。为了迎合这一趋势 CSS3 动画都被各大浏览器厂商支持的很好。例如 transform 和transition，使用这些CSS属性做动画时，值得我们注意的是应该尽量利用3D模式，使得浏览器能够通过启用硬件加速使得动画变得更加流畅。而在项目过程中偶尔碰到动画过程中的动画闪白可以通过设置backface-visibility 来解决。

-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;

Touch Event 触摸事件
在web端，前端开发绑定点击事件固然是click事件，而手机端系统也为我们提供了一些事件来表示手机的操作事件分别是touchstart、touchmove、touchend，这些个事件有点类似web的mousedown、mousemove、mouseup,可惜的是成熟的web端已经有click来代表这三个事件的组合，而mobile端没有，加之手机端使用click 有一个莫名的300ms 等待时间。于是乎，很多聪明的开发者都开始使用自定义的 tap 事件。简单的封装逻辑无非就是以下这些：1、监听touchstart事件；2、在touchstart事件发生时，监听touchmove事件。2、根据touchmove 事件是否产生来断定是否在touchend的时候执行事件指定的回调函数。如果你觉得这样太麻烦了，没有关系，可以不用重复造轮子，试试 mike brook 的thumbs.js也不错。还有一点值得我们注意的是在手机上，a 标签被点击时会有一个难看的点击阴影（在andriod上尤其难看）这个阴影可以通过改变CSS 属性 -webkit-tap-highlight 来去掉。

-webkit-tap-highlight:rgba(0,0,0,0);

Localstorage 本地存储
对于 webapp 来说，本地存储可以配合appCache使得webapp和native app一样具有离线浏览的功能，如何利用好本地存储也确实是一件非常值得研究的事情。而目前浏览器的本地存储都只支持字符串的直接存储，虽然也是key/value性质，但是总会觉得有些不便。项目过程中如果使用localstorage，能像用永久变量一样方便自如,还是需要开发者自行封装，虽然很多浏览器以及提供了JSON对象的stringfy和parse，单仍有少数浏览器不支持，如android 2.1。可以试试lawnchair，一个简单的json 存储器，大小只有5k，项目地址//westcoastlogic.com/lawnchair/

缓存
单独拿出来说缓存其实没有什么意义，但对于把用户群瞄准为高端iPhone用户的开发者还是应该了解，在iPhone的 mobile safari中，缓存是有限制的，在IOS 3.X 版本mobile safari不能缓存超过15KB的单个文件，在IOS4中这个限制是25KB。如果想最大利用缓存的同学可能要权衡一下单个文件的大小还是 HTTP 请求数了。相比之下android的限制要小得多, android 单个文件的缓存限制为2MB。

Iscroll 4
滚动组件，虽然IOS5 已经支持

position:fixed;

overflow:scroll;-webkit-overflow-scrolling: touch;

但是对于andriod 还遥遥无期的样子，而Iscroll 4目前是很多固定滚动的良好解决方案，连microsoft metro的演示demo和apple官方都在使用Iscroll 4。

JS类库
jquery大名鼎鼎，做前端应该都听过，而在mobile 端再用会显得有些太重了，一大堆兼容IE的代码。虽然使用方便，但是仍然是不推荐的。其实mobile js library设计时有不少都受到了jquery的影响，他们提供的接口几乎一致，比如zepto、xuijs、jqmobi 这些都是基础类库，不带ui组件。如果希望有ui组件的同学可以看看jqtouch 和 sencha touch。我推荐的这些类库有些是只对webkit核心浏览器设计的，毕竟目前这些(andriod 和iPhone)在智能手机里占得比重比较大。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！

app开发入门软件开发的含义 app制作教程

本文由 @白羽发布于职坐标。未经许可，禁止转载。