app端 h5 页面兼容性问题和解决方案

一、ios端兼容input光标高度

问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上
当点击输入的时候，光标的高度和父盒子的高度一样, ios手机上显得很丑
解决办法：高度height和行高line-height内容用padding撑开

二、ios端微信h5页面上下滑动时卡顿、页面缺失

问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后，卡顿导致如左图下面部分丢失。

微信 H5 页面兼容性，看看大神的解决方案

出现原因分析：

笼统说微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。【有待考证】

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

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

三、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里，收起键盘的时候会被顶上去，特别是第三方键盘

四、安卓弹出的键盘遮盖文本框

问题详情描述：

安卓微信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()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动

五、安卓弹出的键盘遮盖文本框另外一种解决方案

// AndroidBugWorkaround.java
/**
 * 正确解决webview不能adjustResize的处理类(包含了沉浸式状态栏以及虚拟按键等情况的适配设置)
 */
public class AndroidBugWorkaround {
    public static void assistActivity(Activity activity) {
        new AndroidBugWorkaround(activity);
    }

    private View mChildOfContent;
    private int usableHeightPrevious;
    private FrameLayout.LayoutParams frameLayoutParams;
    private Activity activity;
    private int statusBarHeight;

    private AndroidBugWorkaround(Activity activity) {
        //获取状态栏的高度
        int resourceId = activity.getResources().getIdentifier("status_bar_height", "dimen", "android");
        statusBarHeight = activity.getResources().getDimensionPixelSize(resourceId);
        this.activity = activity;
        FrameLayout content = (FrameLayout) activity.findViewById(android.R.id.content);
        mChildOfContent = content.getChildAt(0);

        //界面出现变动都会调用这个监听事件
        mChildOfContent.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            public void onGlobalLayout() {
                possiblyResizeChildOfContent();
            }
        });

        frameLayoutParams = (FrameLayout.LayoutParams)
                mChildOfContent.getLayoutParams();
    }

    private boolean mIsFirstResize = true;
    private int mChildOfContentSize = 0;
    private int usableHeightNow;

    private void possiblyResizeChildOfContent() {
        //错误做法拿到usableHeightNow
        // int usableHeightNow = computeUsableHeight();
        if (mIsFirstResize) {
            //保留原来系统默认算好的mChildOfContent高度(根据flag和系统状态栏和下面虚拟按键和谐相处的正确值)
            mChildOfContentSize = mChildOfContent.getHeight();
            mIsFirstResize = false;
        }
        usableHeightNow = mChildOfContent.getHeight();
        if (usableHeightNow != usableHeightPrevious) {
            int usableHeightSansKeyboard = mChildOfContent.getRootView().getHeight();
            int heightDifference = usableHeightSansKeyboard - usableHeightNow;
            if (heightDifference > (usableHeightSansKeyboard / 4)) {
                // keyboard probably just became visible
                frameLayoutParams.height = usableHeightSansKeyboard - heightDifference;
            } else {
                // keyboard probably just became hidden
                //这里不能单纯使用frameLayoutParams.height = computeUsableHeight();  因为usableHeightNow和一些flag有关，网上frameLayoutParams.height = usableHeightSansKeyboard 直接就错了，因为usableHeightSansKeyboard恒为全屏高度
                //1.当使用 window.setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN) 全屏时getWindowVisibleDisplayFrame高度为全屏(系统状态栏和下面虚拟按键呼出悬浮在上面)
                //2.当使用FLAG_TRANSLUCENT_STATUS 的时候getWindowVisibleDisplayFrame拿到的是不包含系统状态栏的高度但是又顶上了系统栏的位置，导致出错
                //综合上述几点正确做法为当前代码实现,即使用系统默认算好的mChildOfContent高度，当键盘唤起，保留当前mChildOfContent高度，键盘消失再设置回去
                frameLayoutParams.height = mChildOfContentSize;
            }
            mChildOfContent.requestLayout();
            usableHeightPrevious = frameLayoutParams.height;
        }
    }

    /**
     * 计算mChildOfContent可见高度     ** @return
     */
   /* private int computeUsableHeight() {
        Rect r = new Rect();
        mChildOfContent.getWindowVisibleDisplayFrame(r);
        return (r.bottom - r.top);
    }
*/
}

• 2、在webview宿主activity中加入
  AndroidBugWorkaround.assistActivity(this);//解决webview页面键盘不能顶起布局

六、h5禁止页面放大缩小

android端只需要在index.html中设置如下
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"">
ios端

window.onload = function () {

    document.addEventListener('gesturestart', function (e) {
        e.preventDefault();
    });
    document.addEventListener('dblclick', function (e) {
        e.preventDefault();
    });

    // 阻止双击放大
    var lastTouchEnd = 0;
    document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    });
    document.addEventListener('touchend', function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);

    // 阻止双指放大
    document.addEventListener('gesturestart', function (event) {
        event.preventDefault();
    });

    var roll = document.body.scrollTop;
}

七、页面rem适配

(function () {
    function setPxPerRem() { // 把viewport分成10份的rem，html标签的font-size设置为1rem的大小;
        var pxPerRem = document.getElementsByTagName("html")[0].offsetWidth / 10;
        document.getElementsByTagName("html")[0].setAttribute("style", "font-size:" + pxPerRem + "px !important");
    }

    setPxPerRem();
})();

八、url链接参数的值

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var url = decodeURI(window.location.search);
    var r = url.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}