想着自己是不是要写点什么，马上想到了上半年移动端遇到的坑坑洼洼。有这样的小剧场：汪，红米这里有问题；汪汪汪，魅族怎么显示不出来呢；汪汪… (o`･ω･)ﾉ(ﾉД`)

后天就要回广州啦，北京再见_(:з」∠)_

position: fixed

场景

移动端的在线客服，聊天室风格，输入框置底，参考手Q，需求方坚持这种聊天风格不肯妥协，考虑 UC 浏览器和 app 内置浏览器，忽略 wp

问题描述

  1. ios 中点浏览器顶部显示地址栏，随后呼出软键盘的时候会导致 fixed 元素上移，稳定重现；小米2中呼出软键盘会导致 fixed 在底部的元素位置错乱，具体表现为与软键盘之间存在较大间隙，不稳定重现。华为和魅族表现良好（图片回头补上）
  2. webView 中呼出软键盘，底部输入框被完全遮挡，页面没有向上滑

解决思路

  1. 有如下几种尝试，无法彻底解决问题
    • 尝试 flex 布局。ios 中出现顶部 banner 被地址栏覆盖的问题
    • 尝试绝对定位，容器高度由 js 计算。ios 中，在浏览器地址栏显示的情况下，由于页面高度过长，底部输入框需要滚动才能看到，严重影响用户体验。android 地址栏不会自动隐藏，因此不会出现该问题。然而 android 的第三方输入法在输入待选上面一般会有一行工具栏，不稳定出现覆盖底部输入框的问题。
    • 尝试在呼出软键盘之后做绝对定位和相对定位的切换。浏览器无法及时反馈软键盘的状态。ios 可以通过监听 focus 得知是否呼出软键盘；android 中，由于软键盘呼出后可以手动点击隐藏软键盘却不丢失输入框焦点，使用轮询的方式监听 viewport 的高度判断是否呼出软键盘（呼出软键盘，viewpoet 的高度将减小，有一个逐步变化过程）。但由于这种暴力的方式在红米下改变 scrollTop 显示输入框的过程中出现高度错乱，弃用
  2. 在简单的例子测试中发现软键盘不会影响到页面的表现，沟通后是 webView 配置的问题，交给客户端的同学解决（写简单的例子做测试很重要啊）

小结

千万不要置底输入框！千万不要置底输入框！千万不要置底输入框！移动 web 中的输入场景大部分使用弹窗，或者切换页面置顶输入框提供输入和单词联想

android 中 (-webkit-)transform 无效

问题描述

做 H5 滑动页面经常会有提示滚动下一页的小三角形，使用伪元素和transform实现（包括-webkit-前缀）。发现 android 2.x 和 4.x 下 transform 和 animation 无效

解决思路

抛弃伪元素使用标签实现。在 android 2.x 下发现transform:rotate仍然无效，在父元素添加transform: rotate(0)即可

小屏幕兼容

问题描述

有些暴力的设计师会在单屏的页面或者 dialog 里面塞很多很多东西，可能是表单或者动画元素，导致 iphone 4s 之类的 3.5 寸屏幕压力山大

解决思路

添加适当的断点，使用transform: scale或者zoom对容器做缩放比重新设置宽高要方便的多多。前者可通过改变transform-origin修改缩放的支点，后者不支持字体缩放的样子，没具体使用过。如果是 dialog 之类进入页面不会立即显示出来的元素，也可以通过 js 计算得到最适合的缩放比例

可以尝试通过百分比或者 rem 解决类似问题。举个例子，手机 UC 浏览器下载官网，一个页面会有多个动画元素，有时候是多个居中，有时候是垂直多个不重叠。多个元素需要定位到准确的位置，然后加上动画并保持动画的连贯，此时如果用百分比为单位会有比较繁琐的计算

rem 是十分有效的解决方法！！

小米手机绝对定位元素消失

问题描述

小米手机自带浏览器上使用绝对定位的元素没有显示出来，调高 z-index 无果

解决思路

添加一个设置opacity: 1的动画即可

UC 浏览器图片降色问题

场景

忘了哪一天开始，android 上的 UC 浏览器发现了这个问题，吓坏我和我的小伙伴了。找了内核的同学沟通，是 android 上的 UC 浏览器为了更好地控制内存，对体积比较大的图片做了优化处理，结果跑偏了。问题已反馈，UC 10.x 好像还有这个问题，现在不知道解决了没有

问题描述

android 上的 UC 浏览器都会不稳定出现，低端机更为明显。体积比较大的图片（20kb+）不稳定出现这个问题，表现为图片颜色变得偏灰色，透明颜色渐变的区域直接变成一块灰色。png8、 png24 和 jpg 都没法避免

解决思路

完全透明不会受影响。将图片导出为交错可解决小部分问题。最优是将大图拆分为小图拼接

IOS 音频缓存问题

场景

UC 浏览器中点击按钮通过创建 audio 标签加载音频并播放，调起浏览器分享接口分享到微信后回到 UC 发现已缓存的音频无法播放

问题描述

ios 中切换应用程序会导致浏览器中已缓存的音频无法播放，稳定重现

解决思路

在调用分享接口后添加时间戳重新加载已缓存的音频文件

小结

weinre 居家旅行调试必备

vuejs 0.10 动画卡顿

场景

多个页面通过v-if和入场动画控制切换，每个页面有两到三个动画，切换多个页面后发现 android 中动画卡顿严重

问题描述

通过 weinre 查看切换多个页面后文档中的节点，发现不满足v-if的节点并没有被移除，而只是简单隐藏，与 chrome 中的表现不符。切换多个页面后，有多个动画同时运行导致了严重的卡顿

解决思路

添加一个class="playing"的标记，限制多个页面的动画同时运行

canvas 绘制图片模糊

问题描述

发现移动端将图片插入 canvas 容器后，图片变得模糊。原因是图片插入 canvas 不再是 @2x

解决思路

将两倍大小的图片插进去 canvas 容器，再对容器进行缩放。可通过 hidpi-canvas.js 帮忙

onkeyup

问题描述

ios 中监听输入，使用 onkeyup，发现有几个手机没法触发事件，我的 5s 没问题，别人的 5s 就不行了

解决思路

ios8 支持第三方键盘。ios 自带输入法的输入能触发 onkeyup，其他就不行了。改用 oninput 实现。wp 使用 onpropertychange 实现

border 扁角

问题描述

使用 border 画扁扁的三角形，在宽度大大于高度的情况下会出现锯齿的情况。chrome pc 比较明显，手机看着也有点不舒服

解决思路

改用transform: rotate和overflow: hidden实现

border-radius 和 overflow: hidden

问题描述

高度固定的容器A里面有一个高度固定的列表B，将列表B设置为overflow: auto。容器A为overflow:hidden;，如果容器A有一个border-radius:5px，可见到列表B会溢出

解决思路

使用贴图做圆角（一下子回到解放前。。）

动画闪烁

问题描述

使用transition: height .5s实现下拉菜单，在 ios 出现闪烁现象

解决方案

添加-webkit-backface-visibility: hidden;。建议避免修改height、 margin等会引起页面重排的样式，opacity和transform实现的动画在移动端上表现更好

推荐的工具

  1. Weinre
    允许在 PC 通过控制台调试移动端页面。很方便部署，也可以配合 grunt 使用

  2. Charles
    Mac 下的抓包工具，在一些场景下抓包工具能提供很大的帮助，比如确认手机页面发出的请求参数是否正确，统计请求等。window 用 Fiddler 然后 mac 用 Charles 都能玩的很愉快

  3. UC Qr Code
    Chrome 的二维码插件，简单却又方便到没朋友

未完待续

如果发现有写不对的地方可以邮件联系_(:з」∠)_