无线页面的“坑”

CSS

布局

Android下微信内置浏览器不支持 display:table方式纵向对齐

解决办法：换成其他布局方式

图片

背景图片不显示

起因：使用了全格式的background语法

background:url(../img/order.jpg) no-repeat scroll 50% 50% ~"/" 293/@unit padding-box border-box;

解决办法： 换成不完全格式的，通用点得语法。

background:url(../img/order.jpg) no-repeat scroll 50% 50% ;
background-size: 293/@unit;

JavaScript

事件

touchmove事件只响应一次，不能持续响应

原因： 只监听了touchmove消息，没有拦截事件冒泡
解决办法：e.preventDefault()

inputp[type=date]的change事件不响应

问题描述： Android平台上，input[type=date]元素，当用户已经在原生的日期选择框中选择日期之后，不触发任何消息，包括input/change/blur/paste/click

原因：https://code.google.com/p/chromium/issues/detail?id=303971
解决办法：通过setInterval方式，轮询输入框中内容是否合法。这是一个恶心的解决方案，但是目前没有办法。

HTML

input[type=file]无法调用摄像头

问题描述：图片上传的input，在android下可以选择摄像头拍摄或者相册，但是IOS下不行。
原来的代码(以下两种写法都无法调用摄像头)：

<input type="file" accept="image/*;" capture="camera" name="image" multiple>
<input type="file" accept="image/*;capture=camera" name="image" multiple>

原因：IOS下如果input需要支持多选，就会禁用摄像机功能，这个约定很蛋疼，看来IOS工程师们没有想到使用摄像头，并且多选图片的交互怎么做。
解决办法：放弃图片多选

<input type="file" accept="image/*;" capture="camera" name="image" >