项目开发中常见兼容问题

常见兼容问题 和 input输入框与软键盘的兼容问题

1. button标签里面包裹a标签，在IE浏览器上会出现兼容问题

问题描述： a标签会被隐藏不显示
解决方案:

1. 将button标签直接替换成a标签，不要包裹了
2. 在button标签上用onClick事件来进行页面跳转<button οnclick="window.location.href('/jsp/manage/manage-context.jsp')" ></button>

2. 多行文本超出变省略号

问题描述： 在不是webkit 内核的浏览器中会失效
解决方案： 本人的这个博客https://blog.csdn.net/weixin_43990297/article/details/102932142
里面有解决方案

3. 去除input默认样式

input,textarea {
    border: 0;
    -webkit-appearance: none; //可同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现,加了此属性后,iOS下默认还是有圆角的,不过可以用border-radius属性修改
}

4. 移动端HTML5 audio autoplay失效问题

由于自动播放网页中的音频或视频会给用户带来困扰或不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用JS的触发播放,必须由用户来触发才播放;

解决方案：

document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});

5.ios防止长按页面元素被选中

-webkit-touch-callout:none;  //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口
-webkit-user-select:none; //webkit浏览器  
-khtml-user-select:none; //早期浏览器 
-moz-user-select:none; //火狐 
-ms-user-select:none; //IE10 
user-select:none; 

添加以上就可禁用长按选中，在ios和大部分安卓上面，但是会出现input无法输入内容的问题，所以还需要在设置下input的样式

input {      
     -webkit-user-select:auto; //webkit浏览器    
}

6. H5页面上下滚动页面卡顿

在页面布局中，通常设置一个高度为100vh的盒子，然后再在内部放一个height:100%的div，设置overflow-y: auto;但是在真机上会发现滚动会很卡顿，添加如下代码

.scroll-box {
  /* 模态框之类的div不能放在这个容器中,否则关闭模态框有时候关闭不了 */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

7. 部分手机横竖屏会出现字体加粗不一致

iOS浏览器横屏时会重置字体大小,设置text-size-adjust为none可以解决iOS上的问题,但桌面版Safari的字体缩放功能会失效,因此最佳方案是将text-size-adjust为100%

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;

8.某些情况下非可点击元素如(label,span)监听click事件,ios下不会触发

针对这个情况对该元素设置 cursor: pointer;

9. 手机 1px 问题

一般用border来设置边框会因为手机屏幕密度问题 会显示很粗，所以一般用伪元素再加上css3缩放来模拟边框 ，还有一个在掘金上看到的一位写的万金油解决方法，大家可以去看下https://juejin.im/post/5d70a030f265da03a715f3fd

.scale{
  position: relative;
  border:none;
}
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

10.input输入框与软键盘的bug解决方法

1. 一般使用了苹果第三方输入法的手机都重现了这弹出的键盘挡住Input输入框

const input = document.getElementsByTagName('input')[0];

let interval;

input.onfocus = () => {

interval = setInterval(() => {

input.scrollIntoViewIfNeeded();

}, 1000);

};

input.onblur = () => {

clearInterval(interval);

};

2. 在部分安卓机上会发现底部定位元素被键盘顶起出现布局错乱问题

$(function () {

　　 var u = navigator.userAgent, app = navigator.appVersion;

　　 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g

　　 var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

　　 if (isAndroid) {

　　 //这个是安卓操作系统

　　 var wHeight1 = window.innerHeight; //获取初始可视窗口高度

　　 $(window).resize(function(){

　　 			var wHeight3 = window.innerHeight;

　　 			if(wHeight3 < wHeight1){

　　					 $(".phoneBox,.subBtn,.return,.makeSure").hide();

　　				 }else if(wHeight3 == wHeight1){

　　 				$(".phoneBox,.subBtn,.return,.makeSure").show();

　　			 }

　　 	})

　　 }

　　	 if (isIOS) {

　　			//这个是ios操作系统

　　	 }

　　});

created() {
    this.handleFocusOut();
    this.handleResize();
},
methods:{
    handleFocusOut() {
      // input 焦点失焦后，ios 键盘收起，但没有触发 window resize，导致实际页面dom仍然被键盘顶上去--错位
      document.addEventListener('focusout', () => {
        document.body.scrollTop = 0;
      });
    },
    // 监听resize事件（键盘弹起触发），然后将 input textarea 元素滑动到可视区域，并将特定元素隐藏
    handleResize() {
      const clientHeight = document.documentElement.clientHeight;
      window.addEventListener('resize', () => {
        // 判断当前 active 的元素是否为 input 或 textarea
        if (
          document.activeElement.tagName === 'INPUT' ||
          document.activeElement.tagName === 'TEXTAREA'
        ) {
          setTimeout(() => {
            // 原生方法，滚动至需要显示的位置
            document.activeElement.scrollIntoView();
          }, 0);
        }

        // 解决键盘弹起后 fixed 定位元素被顶起问题
        const bodyHeight = document.documentElement.clientHeight;
        const ele = document.getElementById('fixed-bottom');
        if (ele) {
          if (clientHeight > bodyHeight) {
            ele.style.display = 'none';
          } else {
            ele.style.display = 'block';
          }
        }
      });
    }
}

11.在uc浏览器上网页的底部会被强制插入广告

解决方法

iframe{
	display:none!important;
}

12.移动端300ms点击事件延迟

问题出现的原因，主要是苹果手机当时双击缩放页面的约定造成的，具体的大家自行去百度，现在主要说下解决方法

1. 通过meta标签来进行设置，此方法能解决大多数机型，但部分ios机上还是会出现问题，且页面不能缩放了。

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

2. 通过引入第三方库来解决，fastclick.js FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉，是现在主流的解决方案

// 在vue项目中可选择安装依赖包来解决

npm install fastclick ---save

然后再main.js中配置

import fastClick from 'fastclick'
fastClick.attach(document.body)

/*------------------------------------*/
在普通项目中可直接在页面引入fastclick.js
然后加入下面配置
window.addEventListener(function(){ 
    FastClick.attach( document.body );
},false );
如果使用了jquery，也可以写成
$(function() {  
    FastClick.attach(document.body);  
});

关于移动端使用position:fixed/absolute出现随屏幕滚动情况

在position:fixed/absolute内加入 

-webkit-transform: translateZ(0);
假如有遮罩情况则在内容区域，加入 ：

margin-bottom:30px;//margin-top:30px;
抖动情况，则在内容区域，加入 ：

overflow-y: auto;