移动开发规范概述

字体设置

使用无衬线字体

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

基础交互

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

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

移动性能

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

发布前必要检查项

• 所有图片必须有进行过压缩

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

• 考虑把大图切成多张小图，常见在banner图过大的场景

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

• 数据离线化，考虑将数据缓存在 localStorage

• 初始请求资源数 < 4 注意！

• 图片使用CSS Sprites 或 DataURI

• 外链 CSS 中避免 @import 引入

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

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

• 静态资源(HTML/CSS/JS/Image)是否优化压缩？

• 避免打包大型类库

• 确保接入层已开启Gzip压缩（考虑提升Gzip级别，使用CPU开销换取加载时间） 注意！

• 尽量使用CSS3代替图片

• 初始首屏之外的静态资源（JS/CSS）延迟加载 注意！

• 初始首屏之外的图片资源按需加载（判断可视区域） 注意！

• 单页面应用(SPA)考虑延迟加载非首屏业务模块

• 开启Keep-Alive链路复用

运行性能优化, 达到操作足够流畅

• 避免 iOS 300+ms 点击延时问题 注意！

• 缓存 DOM 选择与计算

• 避免触发页面重绘的操作

• Debounce连续触发的事件(scroll / resize / touchmove等)，避免高频繁触发执行 注意！

• 尽可能使用事件代理，避免批量绑定事件

• 使用CSS3动画代替JS动画

• 避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度

• HTML结构层级保持足够简单

• 尽能少的使用CSS高级选择器与通配选择器

• Keep it simple

在线性能检测评定工具使用指南

• 访问 Google PageSpeed 在线评定网站

• 在地址栏输入目标URL地址，点击分析按钮开始检测

• 按 PageSpeed 分析出的建议进行优化，优先解决红色类别的问题

常见Hack(不断更新...)

1.修改和去除移动端点击事件出现的背景框

-webkit-tap-highlight-color: rgba(240,240,240,0.7);
//透明色为：rgba(0,0,0,0)

2.选中中文字的背景色

::selection         { background:#FFF; color:#333; }
::-moz-selection    { background:#FFF; color:#333; }
::-webkit-selection { background:#FFF; color:#333;}

3.如何禁止手机浏览器、微信浏览器的上下滑动露出黑色块问题

<script type='text/javascript'>
document.querySelector('body').addEventListener('touchstart', function (ev) {
    event.preventDefault();
});
</script>

4.淘宝无线Web概述地址
5.移动端viewport

width=750,  target-densitydpi=high-dpi，minimum-scale=1.0, maximum-scale=2.0, user-scalable=0
//固定宽度，省事
width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui
//百分比

6.动态设置页面html，Font-size的值，方便使用rem

//为页面html动态设置font-size值
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = clientWidth / 7.5 + 'px';
        //等价于clientWidth / 750 * 100 + 'px';
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);//resize
    doc.addEventListener('DOMContentLoaded', recalc, false);//reload
})(document, window);

7.定义浏览器点击行为：

<a href="tel:[phone]">打电话给:020-10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:[e-mail]">发送邮件: [e-mail]</a>

<meta name="format-detection" content="telephone=no"/>
content 里面的参数：telephone=no 是禁止浏览器自动识别手机号码，email=no 是禁止浏览器自动识别Email。

8.自定义苹果图标
在网站文件根目录放一个 apple-touch-icon.png 文件，苹果设备保存网站为书签或桌面快捷方式时，就会使用这个文件作为图标，文件尺寸建议为：180px × 180px。

9.css

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用无衬线字体*/
}

a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}

html, body {
    -webkit-user-select: none; /*禁止选中文本*/
    user-select: none;
}

button,input,optgroup,select,textarea {
    -webkit-appearance:none; /*去掉webkit默认的表单样式*/
}

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}

input::-webkit-input-placeholder {
    color:#ccc; /*修改webkit中input的planceholder样式*/
}

input:focus::-webkit-input-placeholder {
    color:#f00; /*修改webkit中focus状态下input的planceholder样式*/
}

body {
    -webkit-text-size-adjust: 100%!important; /*禁止IOS调整字体大小*/
}

input::-webkit-input-speech-button {
    display: none; /*隐藏Android的语音输入按钮*/
}

10.media query

@media screen and (max-width: 600px) {
    //你的样式放在这里....
}
@media screen and (min-width: 900px) {
    //你的样式放在这里...
}
@media screen and (min-width: 600px) and (max-width: 900px) {
    //你的样式放在这里...
}

/* iPhone and Smartphones (portrait and landscape) */
@media screen and (min-device-width : 320px) and (max-device-width: 480px) {
    //你的样式放在这里...
}
max-device-width指的是设备整个渲染区宽度（设备的实际宽度）

// Landscape phones and down
@media (max-width: 480px) { ... }
 
// Landscape phone to portrait tablet
@media (max-width: 768px) { ... }
 
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 980px) { ... }
 
// Large desktop
@media (min-width: 1200px) { .. }