ios兼容or移动端适配相关

ios click事件闪烁 延迟

// css控制
div,a,img {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select:none;
}

// FastClick 解决300ms延迟

软键盘遮盖住页面

// 直接写在标签 或者 @blur="onblur"
onblur="setTimeout(function(){window.scrollTo(0, 0);})"
onfocus="setTimeout(function(){window.scrollTo(0, window.outerHeight);},50)"

select ios样式问题

select {
    -webkit-appearance: none;
    -moz-appearance: none;
}

input type="number" 样式问题

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}

判断iPhone X

export const isIphoneX = /iphone/gi.test(navigator.userAgent) && screen.height > 800

是否客户端运行

export const isClient = (() => {
  if (window.android || (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.name)) {
    return true
  } else {
    return false
  }
})()

在ios中input输入内容后搜索，html提供type=search的模式，但是软键盘弹起后，键盘上没有“搜索”，必须在input外层加上form，必须有action

<form action="">
    <input type="search" placeholder="" placeholder="请输入搜索" />
</form>

object-fit: cover在ios有的版本会出现兼容问题 限制宽高

.box {
  overflow: hidden;
  img {
    width: 100%;
  }
}