~~~ 3）IOS点击延迟300ms，使用fastclick解决,或者绑定到touchstart上，会有副作用。fastclick.js 4）ios兼容input光标高度 ~~~ 原因：height和line-height设置居中 解决：使用padding撑开 ~~~ 5）ios键盘唤起，键盘收起以后页面不归位 问题：输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 原因：固定定位的元素，在元素内input框聚焦的时候，弹出的软键盘占位，失去焦点的时候，软键盘消息，但是还是占位的，导致input框不能再次输入。 解决办法：在失去焦点的时候给一个事件(滚动到原来的位置，或者头部) ~~~ <input @blur.prevent = "changeBlur()"> changeBlur(){ let u = Element.scrollIntoViewIfNeeded()：用来将不在浏览器窗口的可见区域内的元素滚动到刘安琪窗口的可见区域。但是如果改元素已经在浏览器窗口的可见区域，则不会发生滚动。 ~~~ 7） em、rem 是实际生产中我们最常用到的单位，可以使用其配合媒体查询改变 body 点击穿透原因：点击关闭按钮，touchend首先触发tap，弹出框和遮罩就会被隐藏了，touchend继续等待300ms发现没有其他行为，继续触发click，这时弹出层已经消失了，所以当click事件的target在底层元素上，就alter内容。 touchend->tap ->click 解决方案： 方案一：遮挡：做一个fade效果 方案二：fastclick 17）浮层上进行滑动，浮层下面的页面也跟着滚动 18）安卓border-radius:50%不圆 使用了rem做适配后，使用具体值设定border-radius，不要用百分百，否则安卓50%是椭圆形。 19）安卓元素无法垂直居中问题 偏上一些，使用zoom解决。 20）安卓部分版本input里的placeholder位置偏上 input的line-height设置为normal "/"); ~~~ 22）ios fixed布局问题 ios下经常会用fixed元素和输入框（input）同时存在的情况。 如果底部输入框软键盘被唤起，再次滚动页面，fixed定位好的元素也随页面滚动起来了。 原因：软键盘唤起后，页面的fixed元素将失效（无法浮动，也可以理解为变成absolute定位），所以当页面超过一屏且滚动时，失效的fixed也会跟随滚动了。 解决思路： 页面不会过长，那么即便fixed元素失效，也无法跟随页面滚动，不会出现上面的问题了。 （把页面滚动改成容器内滚动）。 （尽量使用页面滚动，这样不会有卡顿问题，除非有input，二级菜单等问题。） （输入框选择都很难） 23）ios滚动时动画停止 **移动端滚动懒人推荐使用better-scroll，很好的插件**。 ios滚动动画停止的原因及其他解决办法： 24）长按闪退 ~~~ 27）isScroll非常优秀的解决方案，但是iScroll缺有一个最大的缺陷 --慢（滚动性能没有原生实现好） 解决fixed+原生scroll Fixed在一些移动设备浏览器上有兼容问题，在检测到浏览器不支持fixed时，可以使用absolute作为替代方案，监听window.scroll事件，每次scrll动作结束时，重新计算一次Head的top值，将其定位到页面顶部。 不要在fixed区域直接使用input或textarea元素。 问题一：软件盘弹出，fixed定位会出现问题 问题二：Android下软键盘弹出，会导致输入区域被遮挡。 解决方案：**点击input弹出一个新的视图完成后续的输入**。 28）原生Scroll下的视图切换 使用isScroll非常容易做到 换成Scroll后，**使用淡入淡出的动画效果**。 实现技术要点： 使用一个幕布层（mask）实现淡入效果，在mask完成淡入之后，在完成时机的视图的切换 * 创建幕布，mask为postion：absolute，初始透明状态，北京色为白色，并是mask盖在当前视图上 * mask使用transition实现opacity：1，当动画完成时，mask将视图完全遮住。 * 直接将当前视图隐藏，下一视图显示即可。 * 完成所有动作之后，隐藏mask。 29）原生Scroll页面结构下的侧边栏（我们使用的是抽屉） 在侧边栏显示时，将html与body的高度控制为一屏高，可以防止页面滚动。 30）原生Scroll页面结构下，内容刷新的实现。 加载更多：监听window的scroll事件，当页面滚动时，监听是否滚动到页面底部，自动加载下一页内容。 下拉刷新：（创建一个白屏，改变其高度，或者使用margin-top等）