做了一段时间的手机端页面，碰到了很多问题，列举如下。
1.<input type="date" value="2017-07-13"/>日期组件
iOS和安卓均不支持placeholder。默认指定为text类型，当用户focus的时候自动把type类型改变为date。1
<input placeholder="Date" type="text" onfocus="(this.type='date')">
安卓对日期组件的展现和交互不尽相同，低版本的安卓系统不能支持value，问题如此。
最后我的解决办法是，替换了一个新的日期组件zepto-mdater，但是该组件会与touch.js产生冲突，多次监听tap事件或点击穿透，因此，在与touch.js共用时，需要删除源代码中对tap事件的封装。此外，该组件在红米手机上切换日月时会出现日期重叠，猜测也是受tap事件影响，目前还未确认解决方案。
相关问题：
在iOS/Android上从web-app调用本机日期选择器
android-input-date-field-value-not-clearing
相关笔记：
html5 input类型踩坑纪录
轻量级移动端日期组件
基于zepto的移动端轻量级日期插件
2.白屏解决
css文件加载需要一些时间，在加载的过程中页面空白，可以考虑将css代码内联和前置。
首屏无实际的数据内容，等待异步加载数据再渲染页面导致白屏，可以在首屏直接同步渲染html，后续的滚屏等再采用异步请求数据和渲染html。
客户端渲染无力，在服务端，使用模版引擎渲染所有页面。
减少文件加载体积，如html压缩，js压缩。
相关笔记：
提升HTML5的性能体验系列之一 避免切页白屏
3.flexbox布局
安卓4.0不支持display:-webkit-flex这种写法的弹性布局，但支持display:-webkit-box这种写法的布局，移动端采用弹性布局时，建议直接写display:-webkit-box系列的布局。
相关笔记：
Web移动端Fixed布局的解决方案
移动web页面支持弹性滚动的3个方案
4.移动端点击后可能会出现橙色的背景框1
2
3{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
相关笔记：
css的一些冷知识
5.meta标签1
2
3
4<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" /> //Safari私有标签，允许全屏模式浏览
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> //iPhone私有标签，指定Safari顶端的状态条的样式
<meta content="telephone=no" name="format-detection" /> //忽略将页面中的数字识别为电话号码
6.js单击延迟
click 事件因为要等待单击确认，会有300ms的延迟，以区分单击事件和双击屏幕缩放。
解决方案：
fastclick可以解决在手机上点击事件的300ms延迟。
zepto的touch模块，tap事件也是为了解决在click的延迟问题。
触摸事件的响应顺序为 touchstart –> touchmove –> touchend –> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题。
7.absolute页脚定位，点击输入框弹出输入法，这时候页脚会被拉上来。
解决办法：输入框focus隐藏页脚，blur显示。
8.文字过长时换行或隐藏显示
相关笔记：
纯CSS实现多行文本截断并有省略号
9.tap点击穿透
相关笔记：
移动端click延迟及zepto的穿透现象
移动页面点击穿透问题解决方案
移动端点击事件全攻略
参考文章：
Mobile needs a hero
无线web开发简介
ios和android 浏览器适配问题总结
mobileHack
移动web问题小结
