最近，我为公司的微信公众号写了一个微信h5业务页面。我总结并分享了前端开发过程中的几个兼容性陷阱。项目直接访问公司页面，所以下面的图片比较模糊。

1. iOS兼容光标高度

问题详细描述：安卓手机上显示输入框光标没有任何问题，但苹果手机上显示输入框光标

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

原因分析：通常我们习惯使用属性来设置行间高度，使用line-属性来设置行与行之间的距离（行高）。点击输入时，光标的高度会自动与父框的高度相同。 （ 的设计原理，另一种可能是，当没有内容时，光标的高度等于line-的值。当有内容时，光标从文本的顶部到底部。

解决方案：使用高度和行高来扩展内容

例如：

.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上上下滑动后，就卡住了，下部丢失如左图所示。

原因分析：

一般来说，微信浏览器的内核都使用自己的内核。在iOS中，由于的原因，它使用了自己的内核。对于-，则使用原生控件来实现。对于带有 --- 的网页，将创建一个网页并将其提供给渲染模块。 【待核实】

解决方案：只需在公共样式中添加以下行代码即可

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

但是，这个属性有缺陷。例如，如果你的页面中有一个设置了绝对定位的节点，那么该节点的显示就会混乱。当然，还会有其他的bug。

拓展知识： ---:那是什么？

MDN 是这样定义的：

--- 属性控制元素在移动设备上是否使用滚动反弹效果。

auto：使用正常滚动，当手指离开触摸屏时滚动将立即停止。

：使用带回弹效果的滚动，当手指离开触摸屏时，内容会继续滚动一段时间。继续滚动的速度和持续时间与滚动手势的强度成正比。还会创建一个新的堆栈上下文。

3、ios键盘唤醒，关闭键盘后页面没有回到原来的位置。

问题详细描述：

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

原因分析：

对于固定定位的元素，当聚焦元素的内框架时，软键盘占用会弹出。当焦点丢失时，软键盘消失但占用仍然存在。结果，无法再次进入该框。当焦点丢失时会给出一个事件。

解决方案：

<div class="title"><span>投·被保险人姓名span>div>

class="content">

<input class="content-input" placeholder="请输入姓名" v-model="peopleList.name" @focus="changefocus()" @blur.prevent="changeBlur()"/> div> </div>

changeBlur(){ let u = navigator.userAgent, app = navigator.appVersion; let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(isIOS){ setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 200) } }

拓展知识：iOS中，键盘折叠时， : 的元素会被上推，尤其是第三方键盘

4、弹出键盘覆盖文本框

问题详细描述：

安卓微信H5弹出软键盘并遮挡输入框。下左图是预计激活键盘时的样子，右图是激活键盘时的实际样子。

原因分析：待补充

解决方案：添加事件和标签，如下，首先判断操作是否是在手机上进行。当然，你不需要确定模型、对象属性和方法，延迟0.5秒，因为调用键盘有点慢，导致如果不延迟的话，滚动就会失效。

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

扩展你的知识：

.() 方法将当前元素滚动到浏览器窗口的可见区域。 .ed()方法还用于将不在浏览器窗口可见区域内的元素滚动到浏览器窗口可见区域。但如果元素已经在浏览器窗口的可见区域内，则不会发生滚动。 5.Vue中的路由使用hash模式。开发微信H5页面分享时，上分享设置成功，但iOS上分享异常。

问题详细描述：

与好友分享当前iOS页面是正常的。点击进去是正常的。分享两次就会跳转到首页。使用vue跳转到第二页后，分享时设置分享失败。以上分享正常。

原因分析：后端标志和前端验证，但有时跨域，iOS共享后会自动带上from=&=0等参数。分享好友的参数不一样。看来系统有不同的参数。不一样，但是你不能每次获取url的时候都获取下面这些参数。

解决方案：

（1）可以使用this.$.push改变页面跳转到..href，而不是使用路由。这样可以使地址栏中的地址与当前页面的地址相同，就可以分享成功（适合分享页面不多的时候，作为单个页面使用，刷新页面跳转这样，或者...）

（2）将入口地址保存在本地，需要获取签名时取出。注意：.('href', href);仅在您首次输入单个应用程序时保存！ 【此方法未经验证】

题外话：

如果可以用小程序写页面，就尽量用小程序。对于H5开发，在微信开发者工具中查看页面效果可能不会出现任何问题，因为无法调用软键盘。为了避免频繁的在线发布，可以使用花生壳或者内网穿透的方式搭建一个可以通过域名访问的开发环境的h5页面。在手机上查看效果。顺便说一句，微信内置了浏览器缓存机制。刚刚提交的代码（尤其是js）的效果大约需要半个小时才能生效。

终于：

微信H5页面其实有很多知识，登录授权、授权，这里我们只分享，当然还有上传图片、微信支付等功能，你可能会遇到陷阱，以上陷阱也比较常见，如果有更好的解决方案，请在留言区分享。