固定头部场景下HTML锚点偏移适配 移动端Safari样式异常如何修复？

仅针对Safari浏览器的样式修改方案 #

• 方案1：CSS特性Hack
  利用仅Safari支持的私有属性做特性检测，无需JS介入，示例代码如下：

/* 仅匹配Safari浏览器（含移动端） */
@supports (-webkit-touch-callout: none) {
  /* 针对iPhone横屏<780px的场景单独调整偏移量 */
  @media (max-width:780px){
    #randomClass1, #randomClass2, #randomClass3{
        margin-top: -180px; /* 可根据实际测试效果调整数值 */
        padding-top: 180px;
    }
  }
  /* 其他Safari专属断点调整可以直接加在这里 */
}

• 方案2：JS标记Safari环境
  通过UA判断给根元素加专属类，后续CSS基于该类做样式覆盖：

// 页面加载后执行
if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
  document.documentElement.classList.add('is-safari')
}

对应的CSS样式：

@media (max-width:780px){
  .is-safari #randomClass1, 
  .is-safari #randomClass2, 
  .is-safari #randomClass3{
      margin-top: -180px;
      padding-top: 180px;
  }
}

全浏览器兼容的更优锚点偏移实现方式 #

推荐使用CSS原生的scroll-padding-top属性，该属性是W3C标准中专门为固定头部场景设计的锚点滚动偏移方案，无需给每个锚点元素添加负margin、padding样式，没有布局副作用，兼容所有现代浏览器（移动端Safari 11.1+、Chrome 69+、Firefox 68+），示例代码如下：

/* 直接给滚动根元素设置即可，所有锚点跳转自动生效 */
html {
  scroll-padding-top: 175px;
}

/* 响应式断点直接调整scroll-padding-top数值即可 */
@media (max-width:760px){
  html {
    scroll-padding-top: 160px;
  }
}
@media (max-width:401px){
  html {
    scroll-padding-top: 190px;
  }
}
@media (max-width:317px){
  html {
    scroll-padding-top: 220px;
  }
}
/* 针对Safari横屏场景单独调整也更方便 */
@supports (-webkit-touch-callout: none) {
  @media (max-width:780px){
    html {
      scroll-padding-top: 180px;
    }
  }
}

如果需要兼容极老版本浏览器，可以搭配:target伪类做降级方案：

:target {
  margin-top: -175px;
  padding-top: 175px;
}

内容的提问来源于stack exchange，提问作者kacperrro99