近期给企业手机微信微信公众号，写了手机微信h5业务流程页面，汇总共享一下网页开发全过程中的好多个兼容模式坑，新项目立即拿的企业页面，因此下面涉及到照片都模糊不清解决了。
1、ios端兼容input光标高度
问题详细信息叙述：input文本框光标，在安卓手机上表明没有问题，可是在iPhone上
当点一下键入的情况下，光标的高度和父小盒子的高度一样。例如下面的图，下左图是正常的所希望的文本框光标，右侧是ios的input光标。
发生根本原因：通常大家习惯性用height属性设定行与行的高度和line-height属性设定行与行的间距（行高），当点一下键入的情况下，光标的高度就全自动和父小盒子的高度一样了。（谷歌游览器的设计原理，也有一种将会便是当沒有内容的情况下光标的高度相当于input的line-height的值，当有内容时，光标从input的顶部到文本的底端
解决方案：高度height和行高line-height内容用padding展开
例如：
.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左右滚动后，卡屏造成如下左图下边一部分遗失。
发生根本原因：
含糊说微信浏览器的核心，Android上边是应用内置的WebKit核心，iOS里边因为iPhone的缘故，应用了内置的Safari核心，Safari针对overflow-scrolling用了原生态控制来完成。针对有-webkit-overflow-scrolling的网页页面，会建立一个UIScrollView，给予子layer给3D渲染控制模块应用。【尚需考资格证书】
解决方案：只要在公共性款式添加下边这行编码
*{
-webkit-overflow-scrolling: touch;
}
But，这一属性是有bug的，例如假如你的页面中有设定了绝对定位的连接点，那麼该连接点的展示会紊乱，自然也有会出现别的的一些bug。
扩展专业知识： -webkit-overflow-scrolling:touch是什么？
MDN上是如此理解的：
-webkit-overflow-scrolling 属性操纵原素在设备上是不是应用滚动回弹力实际效果.auto: 应用一般滚动, 当手指头从触摸显示屏移位开，滚动会立刻终止。touch: 应用具备回弹力实际效果的滚动, 当手指头从触摸显示屏移位开，内容会持续保持一段时间的滚动实际效果。再次滚动的效率和不断的时长和滚动动作的剧烈水平正相关。与此同时也会建立一个新的局部变量前后文。
3、ios键盘勾起，电脑键盘收拢之后页面不回位
问题详细信息叙述：
键入内容，软键盘弹出来，页面内容总体移位，可是电脑键盘收拢，页面内容不下降
发生根本原因：
固定定位的原素 在元素内 input 框对焦的情况下 弹出来的软键盘团块 失去焦点的情况下软键盘消退 可是或是团块的 造成input框不可以再度键入 在失去焦点的情况下给一个事情
解决方案：
<div class=\"list-warp\">
<div class=\"title\"><span>投·受益人名字</span></div>
<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)
}
}
扩展专业知识： position: fixed的因素在ios里，收拢电脑键盘的过程中会被顶上去，尤其是第三方电脑键盘
4、安卓系统弹出来的电脑键盘遮住输入框
问题详细信息叙述：
安卓微信H5弹出来软键盘后遮挡input文本框，如下所示下左图是希望勾起电脑键盘的情况下模样，右侧是具体勾起电脑键盘的模样
发生根本原因：待填补
解决方案：给input和textarea标签加上focus事情，如下所示，先分辨是否安卓手机下的实际操作，自然，可以不用分辨型号，Document 目标属性和方式 ，setTimeout延迟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);
}
}
扩展专业知识：
Element.scrollIntoView()方式 让当今的原素滚动到电脑浏览器对话框的可见地区内。而Element.scrollIntoViewIfNeeded()方式 也是用于将没有在电脑浏览器对话框的由此可见地区内的原素滚动到电脑浏览器对话框的由此可见地区。但假如该原素已经在网页对话框的由此可见地区内，则不容易产生滚动
5、Vue西路由应用hash方式，开发微信H5页面共享时在安卓系统上设定共享取得成功，可是ios的共享出现异常
问题详细信息叙述：
ios现阶段页面共享给朋友，点一下进去是正常的，假如二次共享，则自动跳转到主页；应用vue router自动跳转到第二个页面后在共享时，分享设定不成功；以上安卓系统共享全是正常的
发生根本原因：jssdk是后面开展签定，前面校检，可是有时候跨域请求，ios是共享之后会全自动携带 from=singlemessage&isappinstalled=0 及其别的主要参数，共享微信朋友圈主要参数还不一样，好像系统软件不一样主要参数也不一样，可是每一次获得url并无法获得后边这种主要参数
解决方案：
(1)可以应用改页面this.$router.push自动跳转，为window.location.href去跳转，而不应用路由跳转，那样可以使搜索框的地点与当页的详细地址一样，可以共享取得成功（合适共享的页面很少的情形下，做为一个仅仅页应用，那样更新页面自动跳转，或是..）
（2）把入口地址保存在当地，等必须获取签名的情况下 取出来，留意：sessionStorage.setItem(‘href’,href); 只在刚进到单运用的情况下保存！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
