最近给公司微信人账号写了一个微信h5业务页面，总结分享了前端开发过程中的几个兼容坑，项目直接拍的公司页面，所以下面涉及的图片都模糊了。

1。ios兼容的输入光标高度

问题形态详情:输入框光标在安卓手机上显示没问题，但在苹果手机上。

单击Enter时，光标的高度与父框的高度相同。比如下图，左图是正常预期的输入框光标，右图是ios的输入光标。

原因分析:通常我们习惯用height属性设置行间距，用line-height属性设置行间距(行高)。当我们单击输入时刻时，光标的高度将自动与父框的高度相同。(Google浏览器的设计原理，另一种可能是，没有内容的时候，光标的高度是输入的line-height的值，有内容的时候，光标从输入的顶部到文本的底部。

解决方案:高度和行高内容用填充展开。

例如:

.content{ float: left; box-sizing: border-box; height: 88px; width: calc(100% – 240px); .content-input{ display: block; box-sizing: border-box; width: 100%; color: #333333; font-size: 28px; //line-height: 88px; padding-top: 20px; padding-bottom: 20px; }}

2。ios上的微信h5页面上下滑动时卡住，页面丢失

问题详情:在ios端，当页面上下滑动时，如果页面高度超过一个屏幕，就会出现明显的卡顿，页面会出现部门内容显示不全的情况。比如下图，右图是正常页面，ios上下滑动后，卡顿会导致下图左图所示的部门丢失。

原因分析:

一般来说，微信浏览器的内核，安卓用自己的WebKit内核，iOS为了苹果用自己的Safari内核，Safari用原生控件进行溢出-滚动。对于带有-webkit-overflow-scrolling的网页，将创建一个UIScrollView，并为渲染模块提供子层。[待核实]

解决方案:只需将下面一行代码添加到公共样式中。

*{ -webkit-overflow-scrolling: touch;}

但是，这个属性有一个缺陷。比如你的页面里有一个绝对定位的节点，节点的显示会很复杂，虽然会有其他bug。

拓展知识:-Webkit-溢出-滚动:什么是触摸？

这是MDN上的定义:

webkit-overflow-scrolling属性控制元素是否在移动设备上使用旋转反弹效果。自动:对于常见的旋转，当手指从触摸屏上移开时，旋转会立即停止。触摸:利用具有反弹效果的旋转，当手指从触摸屏上移开时，内容会继续保持一段时间的旋转效果。持续旋转的速率与持续时间和旋转手势的强烈程度成正比。同时，将建立新的inn上下文。

3。ios键盘唤醒，放好键盘后页面不返回

问题的详细信息:

营销外包团队如何收费，销售外包公司的收费标准。

输入内容，软键盘弹出，页面内容整体上移，但键盘收起，页面内容不向下滑动。

原因分析:

稳固定位的元素在元素中的输入框获得焦点的瞬间弹出，软键盘在失去焦点的瞬间消失，但仍然占据空间，使得输入框在失去焦点的瞬间无法再次输入给出一个事项。

解决方案:

lt;div class=”list-warp”gt; lt;div class=”title”gt;lt;spangt;投·被保险人姓名lt;/spangt;lt;/divgt; lt;div class=”content”gt; lt;input class=”content-input” placeholder=”请输入姓名” v-model=”peopleList.name” @focus=”changefocus()” @blur.prevent=”changeBlur()”/gt; lt;/divgt; lt;/divgt;
changeBlur(){ let u = navigator.userAgent, app = navigator.appVersion; let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); if(isIOS){ setTimeout(() =gt; { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 window.scrollTo(0, Math.max(scrollHeight – 1, 0)) }, 200) } }

扩展知识:位置的元素:固定是ios中键盘收起时被推上去的，尤其是第三方键盘。

4。Android中弹出的键盘覆盖文本框

问题的详细信息:

安卓微信H5弹出软键盘，覆盖输入输入框。下图左图是键盘预计被唤起的瞬间，右图是键盘的现实。

原因分析:待补救

解决方案:向输入和文本区域标签添加焦点，如下所示。先判断是不是安卓手机下的操作。当然，你不需要判断模型，文档工具属性和方法。setTimeout延迟0.5秒。因为挪用安卓键盘有点慢，不延迟的话旋转无效。

changefocus(){ let u = navigator.userAgent, app = navigator.appVersion; let isAndroid = u.indexOf(‘Android’) gt; -1 || u.indexOf(‘Linux’) gt; -1; if(isAndroid){ setTimeout(function() { document.activeElement.scrollIntoViewIfNeeded(); document.activeElement.scrollIntoView(); }, 500); }}

扩展知识:

方法使当前元素旋转到浏览器窗口的可见区域。Element.scrollIntoViewIfNeeded()方法还用于将不在浏览器窗口可见区域中的元素旋转到浏览器窗口的可见区域。但是，如果元素已经在浏览器窗口的可见区域中，它将不会旋转。

5。Vue中路由使用hash模式，开发微信H5页面分享时在Android上设置分享成功，但ios的分享异常。

问题的详细信息:

当前的ios页面与密友共享。点进去很正常。如果是第二次分享，跳转到首页。用vue路由器跳转到第二页后，分享时分享设置失败；以上安卓分享正常。

原因分析:jssdk是后端签名，前端验证，但有时是跨域的，ios会自动带from=singlemessageamp分享后 ampIsappinstalled=0等参数，分享朋友圈的参数也不尽相同，似乎每个系统的参数都不一样，但你不可能每次获取网址都获得后面的参数。

解决方案:

(1)您可以更改此页面。$router.push跳转为window.location.href，而不是使用路由跳转，这样地址栏的地址就可以和当前页面的地址相同，你就可以成功分享了(如果适合分享的页面不多，可以作为单个页面，从而刷新页面跳转，也一样…)

(2)入口地址留在内陆，需要签名的时候拿出来。注意:sessionstorage。setitem (‘href ‘，href)；只有第一次进单申请的时候才保留！