1. -webkit-touch-callout属性用法极少，可参考-webkit-touch-callout - CSS：层叠样式表 | MDN
@supports(-webkit-touch-callout:none) {
  /* iOS styles */
  height: calc(100vh - 56px - 16px) !important;
  padding-bottom: 100px; // 通常底部有导航使用padding-bottom兼容ios的高度问题
}

2. iphone安全区适配方案

可参考：网页适配 iPhoneX，就是这么简单_TANG-csdn的博客-CSDN博客

3. ios页面过高时，有时会出现多层滚动条，如果有吸底的组件，可以考虑使用1中方法设置bodyoverflow:hidden。安卓侧通常不用处理。