总览

页面从缓存中拿onpageshow

后退键在安卓和 ios 上的表现不同，安卓的后退键会默认地把页面刷新一次。然而 ios 则会从页面的 cache 中拿取页面，而不会再次执行 js 代码，导致了一些问题。解决办法是通过给 window 绑定onpageshow，然后判断event.persisted，如果是从缓存中拿取的，就 location.reload 一下，就会重新执行一下页面的 js 了。

window.onpageshow = function(event) {
  if (event.persisted) {
    location.reload();
  }
};

锁住整个页面不让滑动

讲道理的话，给body一个overflow:hidden就行了

.fix-scroll {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

但是移动浏览器安卓 2.3 对于锁住滑动支持的不好

所以完美的解决在于，body和html都加上上述的类就行了

移动端不用placeholder

placeholder 本身浏览器的支持还是不错的，但是如果想控制 placeholder 的属性，::-webkit-input-placeholder支持的就不好了

于是使用替代的 data-placeholder

然后在 div 中添加以下代码

&::after {
  content: attr(data-placeholder);
  display: block;
  position: absolute;
  top: 50%;
  right: 10px;
  .transform(translateY(-50%));
  white-space: nowrap;
  font-size: 15px;
  color: @color-text-grey;
  z-index: -1;
}
&.has-value::after {
  display: none;
}

通过切换 has-value 就可以切换展示与否了

安卓 2.3 不支持 react,使用ES5-shim

因为安卓 2.3 对于 es5 的属性不能完全的支持，而 react 里面用到了 bind，freeze 等等 es5 才支持的属性，所以直接使用，会挂。

直接在页面上引入了es5-shim.js 和 es5-shim.min.js这两个 js 就搞定了。代码地址

功能是让那些对 es5 支持的不好的浏览器可以使用 es5 的特性。

安卓 2.3 对于空格符的支持

必须得写成 ，如果不加分号安卓 2.3 会不识别，其他都识别的

安卓 2.3 在 input 获得焦点的时候会有黄色边框

加上这个属性就可以搞定了

input:focus {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

安卓 2.3 拿到 domain 需要拼装一下

一般的只需要location.origin就可以拿到了，但是安卓 2.3 需要location.protocol + '//' + location.host这样才能够保证兼容性。

genomotion 小 bug

测试轮询 ajax 刷新状态的，结果 genomotion 的模拟器居然同样的请求不重新请求，导致一直是失败的状态，坑爹的模拟器

ios 隐身模式下禁用 localstorage

处理 localstorage 的地方用 try catch 包裹住，防止 js 报错从而卡住了页面

display:flex 的注意点

这个很神奇，让元素拥有自动扩展和收缩的能力，非常好用，注意里面的子元素都必须是 block 的，否则 android 下面会有问题

align-items:center

这个属性是与 display:flex 配合使用的，是用来垂直方向上的居中对齐的，很好用，是用来在 flex 中替代 vertical-align:middle 的。

注意安卓机器只能识别为 display:-webkit-box，这时得加上 -webkit-box-align:center;才行！！！！

而且 iphone 7 版本(5s)的得加上-webkit-align-items:center;

ios input 自带的 border-radius 和阴影背景

这样可以去掉

border-radius: 0px;
-webkit-appearance: none;

transform 使用百分比进行动画在安卓低版本版本下会有 bug

参见例子zepto_onepage_scroll,这个网站在低版本 4.1 的三星下是有问题的，因为在 translate3d 时用了百分比，最后改了代码，使用了 px 作为单位就正常了

fixed 父元素的子元素想使用 zepto 来控制 hide 和 show，结果 4.1 的三星就没有效果了

解决方法直接在父元素上调用 hide 或者 show，或者给子元素也加上 fixed 属性就行了

输入密码的同时唤起数字键盘

<input type="password" pattern="[0-9]*" />

这样在 ios 下可以完美的唤起数字键盘，并且输入会被掩码盖住，部分安卓机下有效

安卓机下去掉 select 元素的上下的那个小符号

使用-webkit-appearance: none;

字体被透明化

把背景的 opacity 去掉，然后 background-color 改为 background:rgba(0, 0, 0, 0.7)，这个会比较好用，手机上的兼容性不错，上图的左边为优化过的，不被透明化了。

input 输入框右侧出现的小叉叉

```css //IE下 input::-ms-clear { display: none; } //chrome内核 input::-webkit-search-cancel-button{ display:none; } ```

fixed 属性在小键盘弹出的时候失效

我们有时把 input 的搜索框 fixed 在页面上，然后在手机的小键盘弹出时，fixed 属性会失效，我们的解决办法可以把整个页面变成竖向的 flex 布局。

设置了 overflow:scroll 之后手机上滑动感觉不流畅

-webkit-overflow-scrolling: touch;

设置了这个属性之后，在手机上的滑动变的更丝滑了

emoji 表情插入后端数据库出错

因为数据库是 UTF-8 的，而手机的 emoji 表情是 UTF-16 位的。插入数据库就会出错，所以 js 做了层阻拦，就是用一层正则’/[\uD800-\uDBFF][\udc00-\udfff]/g’检验了一下，但是阻止 emoji 有些不人性化啊。

react 在 app 内的浏览器的渲染问题

在 chrome，safari 下都是好的，但是手机 app 内打开会有极端的渲染问题。出现在初次没有被渲染，在后续 update 插入文档流时会有渲染问题。后来发现是这种情况下 z-index 会乱。浏览器处理 z-index 没有能按照默认的渲染。解决办法就是手动处理一下 z-index。

ios 针对 div 点击事件失效

这种情况下设置一下cursor:pointer就好了，也是个兼容的 bug

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 981909093@qq.com