移动开发规范概述

责编:menVScode 6/12/2017, 2:06:07 PM 阅读(891)

        以下规范建议,均是Alloyteam在日常开发过程中总结提炼出的经验,规范具备较好的项目实践,强烈推荐使用

        字体设置

        使用无衬线字体

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

        iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明,华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878), 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁。

Heiti SC Light 黑体-简 细体 (iOS 7后废弃)
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑

        原生Android下中文字体与英文字体都选择默认的无衬线字体

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans,中文字体原生 Android 会命中 Droid Sans Fallback
4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体

        

        基础交互

        设置全局的CSS样式,避免图中的长按弹出菜单与选中文本的行为;

a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本(如无文本选中需求,此为必选项) */
    user-select: none;
}

        QQ截图20170612143859

        

        移动性能

        要考虑Android低端机与2G网络场景下性能; 注意!

        发布前必要检查项

                1. 所有图片必须有进行过压缩

                2. 考虑适度的有损压缩,如转化为80%质量的jpg图片

                3. 考虑把大图切成多张小图,常见在banner图过大的场景

        加载性能优化, 达到打开足够快

                1. 数据离线化,考虑将数据缓存在 localStorage

                2. 初始请求资源数 < 4 注意! 

                3. 图片使用CSS Sprites 或 DataURI 

                4. 外链 CSS 中避免 @import 引入 

                5. 考虑内嵌小型的静态资源内容 

                6. 初始请求资源gzip后总体积 < 50kb

                 7. 静态资源(HTML/CSS/JS/Image)是否优化压缩? 

                8. 避免打包大型类库 确保接入层已开启Gzip压缩(考虑提升Gzip级别,使用CPU开销换取加载时间) 注意! 

                9. 尽量使用CSS3代替图片 

                10. 初始首屏之外的静态资源(JS/CSS)延迟加载 注意! 

                11. 初始首屏之外的图片资源按需加载(判断可视区域) 注意!

                12. 单页面应用(SPA)考虑延迟加载非首屏业务模块 开启Keep-Alive链路复用

原址:http://alloyteam.github.io/Spirit/modules/Standard/index.html

标签: 移动端 html5
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码