移动web端开发的一些技巧

移动web端开发的一些技巧
移动端的框架：
zepto.js,Zepto.js是支持移动WebKit浏览器的JavaScript框架，具有与jQuery兼容的语法。轻量级，大小为2-5k的库，通过不错的API处理绝大多数的基本工作,比较适合移动端。
移动端banner切换的插件可以用swiper
字体的使用：
移动端中文字体和微软雅黑很相似但不是微软雅黑

IOS中的字体：
默认中文：Heiti SC
默认英文：Helvetica
默认数字：HelveticaNeue
没有微软雅黑

安卓中的字体：
默认中文：Droidsansfallback
默认英文和默认数字：Droid Sans
没有微软雅黑

winphone中的字体：
默认中文：Dengxian(方正等线体)
默认英文和默认数字：Segoe
没有微软雅黑

移动端中文字体可以使用系统中的默认字体，英文和数字可用Helvetica,使用方法：body{ font-family:Helvetica;}
移动端布局：
布局使用百分比或rem,百分比应该比rem更好控制一点；等宽布局比如导航就可以采用box-sizing:border-box;内补白的方式平分布局。
字体采用rem为单位，根据不同的分辨率设置不同的根元素字体大小，具体如下：

@media only screen and (max-width: 315px) {
    html {
        font-size: 50% !important;
    }
}
@media only screen and (min-width: 316px) {
    html {
        font-size: 62.5% !important;
    }
}   
@media only screen and (min-width: 640px) {
    html {
        font-size: 125% !important;
    }
}   
@media only screen and (min-width: 750px) {
    html {
        font-size: 150% !important;
    }
}
@media only screen and (min-width: 1242px) {
    html {
        font-size: 187.5% !important;
    }
}

有的iphone手机在写css3 transform属性时需加前缀-webkit-
头部标签的添加：

<meta charset="UTF-8">
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-title" content="">
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置苹果工具栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="format-detection" content="telephone=no, email=no" />
<!--下面三个是清除缓存 微信浏览器缓存严重又无刷新；这个方法调试的时候很方便-->
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">