移动端Div高度异常：iPhone12 mini下Timer与Reset按钮高度缩小

我有一个包含input输入框、timer计时器、reset重置按钮的Div容器，在桌面端视图中三者高度一致，但在iPhone12 mini设备上，timer与reset按钮高度出现缩小情况，使用Chrome开发者工具调试时未复现该问题。

相关代码 #

JSX 结构 #

<div style={{ display: "flex", flexDirection: 'row', justifyContent: 'space-between', height: '8vh', alignItems: 'center', }}>                    
    <input                       
        type="text" autoCorrect="off" autoCapitalize="none"
        ref={inputRef}
        value={typedWord}
        onChange={handleInputChange}
        disabled={timer ? false : true}
        autoFocus={true}
    />                   
    <div className="timer">                       
        <span style={{
            fontSize: 20, fontFamily: 'lexend', color: 'var(--text-color)',
        }}>{timer}s</span>                   
    </div>                   
    <div className="reset" onClick={() => {                       
        setRotated(!rotated);                       
        resetTest();                       
        setTypedChars([]);                       
        setTest(false)                   
    }}>                       
        <FiRefreshCcw size={25} color={'var(--text-color)'} className={rotated ? 'icon rotate' : 'icon'} />                   
    </div>               
</div>

CSS 样式 #

input {
  background-color: var(--sub-alt-color);
  border: 1px solid var(--sub-color);
  color: var(--text-color);
  border-radius: 5px;
  padding-left: 20px;
  width: 65.5%;
  max-width: 65.5%;
  min-height: 8vh;
  height: 8vh;
  font-size: 18px;
  outline: none;
  transition: border-color 0.3s ease;
}

.timer {
  width: 14.5%; display: flex; user-select: none; height: 8vh; min-height: 8vh; flex-shrink: 0; align-items: center; justify-content: center; background-color: var(--sub-alt-color); border-radius: 5px;
}
.reset {
  width: 14.5%; display: flex; height: 8vh; align-items: center; min-height: 8vh; flex-shrink: 0; justify-content: center; background-color: var(--sub-alt-color); border-radius: 5px;
  cursor: pointer;
}

解决方案 #

• 修正移动端 vh 单位兼容性问题：iOS Safari 中 vh 会受状态栏、地址栏动态变化影响，导致高度计算偏差。可以改用固定像素值（如 height: 48px），或者给父容器和子元素添加：

  @supports (-webkit-touch-callout: none) {
    .timer, .reset, input {
      height: -webkit-fill-available;
      min-height: 8vh;
    }
  }
  

• 调整 Flex 布局对齐方式：父容器当前用 align-items: center 会让子元素保持自身高度，改为 align-items: stretch，让子元素自动填充父容器高度，再在 .timer 和 .reset 内部用 align-items: center 居中内容，同时移除子元素的 height 声明，继承父容器高度。
• 统一盒模型计算规则：给所有元素添加 box-sizing: border-box，确保高度计算包含边框和内边距，避免默认样式干扰：

  * {
    box-sizing: border-box;
  }
  

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