移动开发基本知识

###移动开发规范概述

字体设置

使用无衬线字体

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 兼容命中系统默认中文字体黑体-简或黑体-繁 原生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;
}

(性能优化可以看原文) 一些问题 1. viewport设置

设置width=device-width

(不设 target-densitydpi值，默认为medium-dpi，即160dpi中密度屏幕显示效果）

设备               屏幕尺寸   物理像素    独立像素    devicePixelRatio缩放比例    屏幕密度
非视网膜iPhone      3.5英寸       320            320              1                  中密度（mdpi）
视网膜屏iPhone      3.5英寸        640           320              2                  极高密度（xhdpi）
Android QVGA屏幕    3英寸          240           320              0.75               低密度屏（ldpi）
Android HVGA屏幕    3.5英寸        320           320              1                  中密度（mdpi）
Android WVGA屏幕   4英寸           480           320              1.5                高密度屏（hdpi）
Galaxy Nexus        4.65英寸       720           360              2                  极高密度（xhdpi）
Galaxy Note         5.3英寸        800           400              2                  极高密度（xhdpi）

设置target-densitydpi=device-dpi, width=device-width此时独立像素和物理像素相等 devicePixelRatio为1，即不进行缩放

1. Android设备border-radius存在锯齿

安卓自带浏览器及Webview对border-radius支持效果不一，大多数浏览器较差，有明显锯齿，尤其是在背景为图片的情况下； 若要兼容自带浏览器或是需要在Webview中打开的页面，且要求较高情况下，需要使用图片实现； 有一种补偿方式：

.rounded{
   box-shadow:0 0 1px rgba(0,0,0,.5);//使用阴影来减轻锯齿；
   -webkit-box-shadow:0 0 1px rgba(0,0,0,.5);//以防支持性问题
}