前端兼容问题汇总及解决方案

一、如何让Chrome支持小于12px 的文字

解决方案：font-size给12px以上的字号，利用transform等比缩小字号

注：字号缩小了，但是空间还在，如果多个元素同时缩小，间距会很大，只能利用margin负值来缩小间距。

{ 	
    font-size:12px; 	
    transform: scale(0.5);    
    transform-origin: 0;     
    margin-left: -28px;
}

二、ios13以上版本，呼起键盘视图不重新绘制，导致吸底会跟着滚动条滑动

解决方案1：参考企微，touchmove的时候，触发吸底输入框的blur事件，就会避免这个问题。

let currentInput = this.$refs.imTextarea;//输入框     
window.addEventListener("touchmove", () => {       currentInput.blur();     });

解决方案2：由于视图不会变， 所以触发不到resize事件，在iOS中，可以通过focusin & focusout事件来进行监听（未实践）

//  IOS  
if (isIOS()) {  
let height = window.visualViewport.height || window.innerHeight     document.body.addEventListener('focusin', () => {       
//软键盘弹出的事件处理 		
console.log(height)     })     
document.body.addEventListener('focusout', () => {       
//软键盘收起的事件处理 		
console.log(height)            
})  
} else {     
//  Android     
const originalHeight =       document.documentElement.clientHeight || document.body.clientHeight     
window.addEventListener('resize', () => {       
const resizeHeight =         
document.documentElement.clientHeight || document.body.clientHeight       

if (resizeHeight - 0 < originalHeight - 0) {        
// 键盘弹起事件               
} else {        
// 键盘收起事件               
}  
})   
}

三、移动端，不新开webview的情况下，跳转页面，回到当前页面，页面不更新

解决方案：监听pageShow时间，强制reload

// 监听页面回退，刷新页面     window.addEventListener("pageshow", function (event) {       if (         event.persisted ||         (performance &&           performance.navigation.type ==             performance.navigation.TYPE_BACK_FORWARD)       ) {         window.location.reload();       }     });

四、移动端，高度为100%、100vh，在浏览器中，会被菜单里遮挡

解决方案：

//外层div添加position，上下左右都定位0 
.container{    
    position: absolute;     
    top: 0;     
    bottom: 0;     
    left: 0;     
    right: 0;     
    background: transparent; 
}

五、部分机型（iphone14）出现在使用swiper时有卡顿和白屏问题

解决方案：

swiper.on("setTranslate", async (targetTransVal) => {        
  const wrapper = document.querySelector(".swiper-wrapper") // 目标元素        
  // 判断要执行swiper的过渡动画时         
  if (wrapper.style.transitionDuration !== "0ms") {          
  // 鼠标在swiper上滑动的距离           
  const curTransVal = swiper.getTranslate()           
  // 取消swiper自带的过渡动画   
  wrapper.style.transitionDuration = ""           
  wrapper.style.transform = `translate3d(0px, ${curTransVal}px, 0px)`            
  // 使用translate3d重定义实现动画          
  const transSimulator = getTransitionSimulator(wrapper,targetTransVal - curTransVal,300, (el, val) => {el.style.transform = `translate3d(0px, ${curTransVal + val}px, 0px)`            })           await transSimulator()           
  // 结束滑动           
  swiper.onSlideToWrapperTransitionEnd?.call(wrapper, {            
  target: wrapper,           
  })        
  }      
  })  	
  // 实现渐变曲线，制作平滑的过渡效果     
  function easeOut(currentTime, startValue, changeValue, duration) {      
  currentTime /= duration       
  return -changeValue * currentTime * (currentTime - 2) + startValue     }  	//使用requestAnimationFrame执行动画     function getTransitionSimulator(ele, distance, duration, callback) {      
  let handle      
  let resolve      
  return () => {         let promise = new Promise((res) => {     resolve = res    })        
  let startTime = performance.now()         
  cancelAnimationFrame(handle)         
  function _animation() {          
  let current = performance.now()           
  // 每一帧的移动距离           
  let disVal = easeOut(current - startTime, 0, distance, duration) callback(ele, disVal)         if ((current - startTime) / duration < 1) { 
  handle = requestAnimationFrame(_animation)           
  } else {  
  
  cancelAnimationFrame(handle)          
  resolve()         
  }       
  }       
  handle = requestAnimationFrame(_animation)  return promise       }