移动端兼容性问题记录.md

IOS兼容性问题

ios微信6.7.4 iOS12下软键盘关闭样式不恢复

原因:苹果系统的一个bug，当键盘收起后不会自动重绘body，需要手动滑动一下才能恢复正常

解决方法

// utils.js
export function iOSKeyboardFixer() {
  if(!/iphone|ipod|ipad/i.test(navigator.appVersion)) {
    return
  }
  // 处理bug
  document.body.scrollTop = document.body.scrollTop
}

// demo.vue
<input @blur="iOSKeyboardFixer"/>

安卓兼容性问题

部分安卓机自带浏览器box-shadow inset不起作用

原因：书写方式不理解

解决方法

/** 不理解 **/
box-shadow: 0 7px 14px inset rgba(247, 165, 95, .9);
/** 正常显示 **/
box-shadow: inset 0 7px 14px rgba(247, 165, 95, .9);

static布局的input输入框在软件盘呼起后被遮挡

原因：外部原素设置了overflow: hidden；

static布局的input输入框在软件盘呼起后外部元素背景图background-size:100% 100%;纵向只显示部分

原因:外部元素设置了height: 100%;