网站移动端显示异常：iframe内容超屏致内嵌底部按钮被遮挡

当前实现里用的calc(100vh - 40px)在移动端有兼容性硬伤：安卓、iOS的移动端浏览器里，地址栏、底部操作栏都是动态浮动的，会随页面滚动收起来或者展开。原生CSS的100vh算的是设备整个物理屏幕的高度，根本没扣掉这些浮动UI占的空间，最后容器实际高度比真实可视范围大，就把iframe底部的按钮挤出屏幕外了，自然会被遮挡。

• 替换核心高度计算逻辑，用动态视口单位适配
  现代移动端浏览器都支持100dvh（动态视口高度），这个值会实时匹配地址栏收放的变化，自动扣除浮动UI占的高度。改的时候要做旧浏览器的兼容兜底，修改后的.listPhotos样式直接替换原代码就行：

  .listPhotos {
    width: 100%;
    cursor: pointer;
    /* 旧版本浏览器兜底，避免dvh不支持 */
    height: calc(100vh - 40px);
    /* 现代移动端浏览器优先用动态视口高度 */
    height: calc(100dvh - 40px);
  }
  

• 补全局基础样式，清掉默认边距带来的额外高度
  很多移动端的高度溢出问题，根源是没清掉浏览器给html、body加的默认边距，这些边距会悄悄占掉一部分高度。在全局样式里加上这几行就能解决：

  html, body {
    margin: 0;
    padding: 0;
    /* 锁死页面滚动，避免视口高度来回跳变 */
    overflow: hidden;
    height: 100%;
  }
  

• 优化iframe样式，避免跨域场景的高度错位
  跨域嵌的iframe经常会因为自己的默认行内间隙、默认边框、内置滚动条出现高度偏移，要补几个强制约束的样式：

  #mNote {
    width: 100%;
    height: 100%;
    /* 消掉默认边框、行内元素的垂直间隙 */
    border: 0;
    display: block;
  }
  

• 测试注意事项
  改完之后要分别测两种场景：一是直接在浏览器地址栏打开页面的效果，二是把页面添加到手机主屏幕、从桌面图标全屏打开的效果。iOS Safari的地址栏在这两种场景下高度差最大，是最容易出现高度计算不准的地方，别漏测。

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