Html开发规范（移动）模版

修订记录

修订日期	修订内容	版本号	修订人
2016.11.10		V1.0

 

一、规范概述

pc版准则，本规则可以视为PC版规则的延续

二、移动端开发规范

1、mete信息

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

1)     width : 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度（单位为缩放为100%的CSS的像素）

2)     height : 和width相对应，指定高度

3)     initial-scale : 初始缩放比例，页面第一次加载时的缩放比例

4)     maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0

5)     minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0

6)     user-scalable : 用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放

7)     忽略将页面中的数字识别为电话号码<meta name="format-detection"content="telephone=no" />

8)     忽略Android平台中对邮箱地址的识别<meta name="format-detection"content="email=no" />

9)     当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- ios7.0版本以后，safari上已看不到效果-->

10)  将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style"content="black" />
<!-- 可选default、black、black-translucent -->

2、字体

1)    移动端（ios，安卓，wp）都有默认字体，不仔细看看不出太大差别，也不难看。可以不使用@font-face加载特殊字体。如果要设置字体，请设置无衬线字体

2)    单位，适配少量设备，px，多种设备rem

3、HTML

1)    使用H5标签
2)    块级化a标签，扩大用户点击区域
3)    利用CSS3边框背景属性
4)    使用webkit-box
5)    使用-webkit-touch-callout:none;禁止长按链接与图片弹出菜单  -webkit-touch-select:none禁止选中文本
6)    若使用图片，请压缩，或分小张图。附一个压缩图片的地址https://tinypng.com/
7)    静态资源要压缩，GZIP

4、加载性能

1)    减少初始请求数
2)    使用css3代替图片，小图片使用DataURI
3)    使用css3动画，减少js动画
4)    首屏以外的资源延迟加载，图片按需加载，或者使用loading进行资源预加载
5)    单页面应用首屏以外的业务模块除非必要，按需加载
6)    离线数据缓存localStorage
7)    Ios有300ms点击延迟，建议使用zepto等手机端专用框架，或者fastclick插件

8)    Html结构保持足够简单

5、Retina 显示屏带来的问题

1)    retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍

2)    前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2
//例如图片宽高为：200px*200px，那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px
.css{font-size:20px}

6、移动端切图

1)  配合java切图的图片格式分为.png和9.png两种。9.png 制作工具为draw9patch 需要安装java包

2)  教程：http://www.oschina.net/p/draw9patch/similar_projects?lang=19&sort=time

7、移动端分辨率

1)    附一个查看移动设备分辨率等信息的网站http://screensiz.es/phone

8、移动手机端常用的CSS3代码

类型	属性	兼容
圆角	border-radius	Firefox、chrome、safari
背景渐变	background	Firefox、chrome、safari、ie
文字阴影	text-shadow	Firefox、chrome、safari、opera
文字截字	text-overflow	Firefox、chrome、safari、ie
强制换行	word-wrap	Firefox、chrome、safari、ie
透明度	opacity	Firefox、chrome、safari、opera