移动端开发常见问题及解决办法

1.页面不可以左右移动，可以在html页面头部加上这行代码：

 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no minimum-scale=1.0,viewport-fit=cover">

2.如果后台请求比较缓慢是，应在点击请求时加上加载框禁止用户连续点击页面和页面出现空白空档期。

3.如页面有存储多个数据时，还应设置禁止页面在电脑端口打开。

//判断当前运行的浏览器环境
function browser() {
    let os = {}; 
	let p = navigator.platform;
	let win=p.indexOf("Win");
    let ua = navigator.userAgent.toLowerCase();
    os.isAndroid = /android/.test(ua); //browser,wechat,android
    os.isIOS = /iphone|ipad|ipod/.test(ua); //browser,wechat,ios
    os.isBrowser = /macintel|win32/.test(navigator.platform.toLowerCase()); //browser
    os.isWeixin = ua.indexOf('micromessenger') != -1; //wechat
    // os.isChrome = ua.indexOf('chrome') != -1; //chrome
    os.isAlipay = ua.indexOf('alipayclient') != -1; //ali
    os.isApp = function() {
        return (this.isAndroid || this.isIOS) && !this.isWeixin && !this.isBrowser && !this.isAlipay;
    };
	if(os.isBrowser && win==0){
		uni.navigateTo({
			url: '../test/test',    //如果非手机端浏览器打开就直接跳转到提示页面
			});
			return false
			
	}
    return os;

4.对比页面在ios手机和安卓手机显示时的区别。

5.苹果手机在调起手机软键盘时容易造成页面上移
解决办法：

@js书写时：
  function blurAdjust( e ){
	setTimeout(()=>{
		if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
			return
		}
		let result = 'pc';
	    if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
	        result = 'ios'
	    }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
	        result = 'android'
	    }
 
	    if( result = 'ios' ){
			document.activeElement.scrollIntoViewIfNeeded(true);
	    }
	},400)
}
@vue方法：
监听input失去焦点事件
   @blur(){
       window.scrollTo(0, 0)
}