Div 不占用手机空间

Question

我有一个包含三个元素的 div：输入字段、计时器、桌面视图中的重置按钮，这三个元素的高度相同，但当我在 iphone 12 mini 上查看它时，计时器和重置按钮的高度会缩小。当我使用 chrome 开发工具测试其尺寸时，没有出现这个问题

<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>

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;
}

Answer 1

该问题与 iPhone 12 Mini 的 缩放器屏幕尺寸以及可能如何处理 vh 单元有关。您知道，vh单位指的是视口高度，在移动设备上，由于浏览器的地址栏和安全区域插入，视口高度的表现可能会略有不同。为了解决这个问题，我认为你可以使用 px 而不是 vh。

我提供更新的代码。

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: 60px; // Changed vh to px
  height: 60px; // Changed vh to px
  font-size: 18px;
  outline: none;
  transition: border-color 0.3s ease;
}

.timer {
  width: 14.5%;
  display: flex;
  user-select: none;
  height: 60px; // Changed vh to px
  min-height: 60px; // Changed vh to px
  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: 60px; // Changed vh to px
  align-items: center;
  min-height: 60px; // Changed vh to px
  flex-shrink: 0;
  justify-content: center;
  background-color: var(--sub-alt-color);
  border-radius: 5px;
  cursor: pointer;
}

希望对您有帮助。