移动端踩的坑（1）

1：//重置（微信端失效（安卓机））window.location.reload()//清空

 

解决方式：（路由跳转+时间戳）

// window.location.href + '?quota=' + new Date().getTime()

 

2：

(2-1)input标签类型：type="text" 不同机型调用的键盘不一样，type="number"，默认是调用数字键盘，

 

对于input标签：

 

(2-2)在type="text"下可以添加属性minLength，maxLenfth（对输入的长度进行限制）

 

(2-3)pattern属性在type="text"下才能使用

 

(2-4)required属性有些机型是不能用的，

 

(2-5)input 的 compositionstart 和 compositionend 事件

   在input中输入中文的时候，在没有选定文字前，输入的每一个拼音字母也会触发input事件，这显然不是我们想要的。我们需要 compositionstart 和 compositionend 事件来处理这个问题。

compositionstart会在用户开始进行非直接输入的时候触发，compositionend会在点选候选词或者点击「选定」按钮之后触发。我们可以在compositionstart的时候将input事件上锁，让其不执行，在compositionend的时候再解锁，

注意：compositionend 事件是在 input 事件后触发的。

 

3:移动端 1px border 实现

 

　由于设备高分辨率屏的原因，逻辑像素的 1px 的 border 在移动设备上会用两个或三个物理像素来表示，所以看起来会感觉很粗。

解决方案有很多，但兼容性最好的方案是用伪元素的 box-shadow 或 border 实现 border，然后用 transform: scale(.5) 缩小到原来的一半。