H5兼容性问题总结

---

iOS 上拉边界下拉出现空白

• 描述：

手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。
在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。

• 解决方案:

document.body.addEventListener(
  'touchmove',
  function(e) {
    if (e._isScroller) return
    // 阻止默认事件
    e.preventDefault()
  },
  {
    passive: false
  }
)

---

ios 日期转换 NAN 的问题

• 描述：
  ios系统对日期格式中的带“-”解析成NAN
• 解决方案:

将日期字符串的格式符号替换成'/'

'yyyy-MM-dd'.replace(/-/g, '/')

iOS 滑动不流畅

• 描述：

ios 手机上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。

• 解决方案:

1. 在滚动容器上增加滚动 touch 方法

.wrapper {
 -webkit-overflow-scrolling: touch;
}

2. 设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。

body {
  overflow-y: hidden;
}
.wrapper {
  overflow-y: auto;
}

如何禁止保存或拷贝图像

• 解决方案:

img {
  -webkit-touch-callout: none;
}

禁止用户选择页面中的文字或者图片复制下载

• 解决方案:

div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

电话号码识别

• 描述：

在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

• 7 位数字，形如：1234567
• 带括号及加号的数字，形如：(+86)123456789
• 双连接线的数字，形如：00-00-00111
• 11 位数字，形如：13800138000

• 解决方案:

• 关闭识别
  <meta name="format-detection" content="telephone=no" />
  *开启识别
  <a href="tel:123456">123456</a>

查询某天是否为工作日

const isWeekday = (date) => date.getDay() % 6 !== 0;

isWeekday(new Date(2022, 03, 18))
// true

转换华氏/摄氏

• 将华氏温度转换为摄氏温度

const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;

fahrenheitToCelsius(50);
// 10

• 将摄氏温度转华氏温度

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;

celsiusToFahrenheit(100)
// 212

两日期之间相差的天数

const dayDiff = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000);

dayDiff(new Date("2021-10-21"), new Date("2022-02-12"))
// Result: 114

将 RGB 转换为十六进制

const rgbToHex = (r, g, b) =>   "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(255, 255, 255); 
//  #ffffff