为什么iOS 10上的最小高度100vh会导致大窗口？

在iOS 10上，当设置一个元素的最小高度为100vh（视口高度）时，可能会出现大窗口的情况。这是由于iOS 10的Safari浏览器在计算视口高度时存在一个bug，导致100vh的计算结果不准确。

具体原因是，在iOS 10的Safari中，当网页有垂直方向的滚动条时，计算视口高度时会包括滚动条的高度，而不是排除滚动条的高度。这就导致了计算出来的100vh值比实际的视口高度要大，从而导致元素的最小高度设置失效，出现了大窗口的情况。

解决这个问题的方法有两种：

1. 使用JavaScript进行修复：通过JavaScript代码获取视口的实际高度，并将这个高度应用到元素的最小高度上。可以使用以下代码进行修复：

function setMinHeight() {
  var vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', vh + 'px');
}

window.addEventListener('resize', setMinHeight);
setMinHeight();

在CSS中，可以使用变量--vh来代替100vh，并将元素的最小高度设置为calc(var(--vh, 1vh) * 100)。

1. 使用其他单位代替vh：如果不想使用JavaScript进行修复，可以考虑使用其他单位来设置元素的最小高度，例如像素(px)或百分比(%)。

总结起来，iOS 10上的最小高度设置为100vh可能会导致大窗口的问题，原因是iOS 10的Safari浏览器在计算视口高度时存在bug。可以通过使用JavaScript修复或者使用其他单位来避免这个问题。