移动页面

字体

1.使用无衬线字体
2.英文和数字使用helvetica
3.不指定默认的中文字体

系统默认字体：

ios 系统

• 默认中文字体是Heiti SC
• 默认英文字体是Helvetica
• 默认数字字体是HelveticaNeue

android 系统

• 默认中文字体是Droidsansfallback
• 默认英文和数字字体是Droid Sans

winphone 系统

• 默认中文字体是Dengxian(方正等线体)
• 默认英文和数字字体是Segoe

图片

1.图标需要提供两倍大图片
2.使用缩略图
3.首屏外图片延迟加载
4.尽可能使用css3代替图片【箭头、菜单等】
5.max-width: 100%，图片尺寸自适应

设备像素比在1.5以上的都用2x

@设备像素比
设备像素比devicePixelRatio简单介绍

性能

1.压缩静态资源
2.尽可能的使用css3取代js动画
3.低端机上降级处理显示效果，如渐变等【怎么判断低端机？】
4.简单的html层级结构

使用html5和css3

1.最低兼容的ie版本为ie9
2.flex
3.box-sizing:border-box

meta标签

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

视窗宽度适应设备宽度，禁止用户缩放

<meta content="yes" name="apple-mobile-web-app-capable" />

启用webapp模式，隐藏工具栏和菜单栏

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

顶栏颜色

<meta name="format-detection" content="telphone=no, email=no" />

电话号码和邮箱识别

交互

1.考虑横竖屏、不同宽度
2.最大化可点击区域

其他

1.移动端页面一般以水果手机为标准设计界面，宽度640像素，重构是按这个大小除以二
2.事件 touchstart --> touchmove -> touchend --》click

响应式设计

1.fluid layout 流动布局，容器宽度定义成浏览器viewport百分比
2.使用媒体查询
3.自适应宽度图片
4.为移动ui改变导航模式
5.改变链接和按钮的样式适于触摸
6.动态字体大小
7.按需加载
8.图形的retina版本

一些常用的插件

iscroll
fullpage
iSlider
EasySlide

资料

https://github.com/linshuizhaoying/mobileTech