微信h5页面是什么，微信h5案例浏览,微信群的引流方法

最近给公司微信民众号，写了微信h5营业页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，以是下文涉及图片都模糊处置了。

1、ios端兼容input光标高度

问题详情形貌：input输入框光标，在安卓手机上显示没有问题，然则在苹果手机上

当点击输入的时刻，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是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内里由于苹果的缘故原由，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会建立一个UIScrollView，提供子layer给渲染模块使用。【有待考证】

解决办法：只需要在公共样式加入下面这行代码

*{
 -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);
 }
}

拓展知识：