CSS在響應式設計中起著至關重要的作用，而在手機端高度問題方面也是如此。在現代網頁設計中，我們經常使用“vh”和“em”作為高度單位。

然而，在手機端，我們必須考慮到屏幕與像素密度的關系。這意味著我們不能直接使用CSS中的“vh”和“em”單位。

/* 應該使用如下代碼 */
height: calc(var(--vh, 1vh) * 100);

上述代碼將創建一個calc函數，并使用“var（）”來引用窗口高度。在這里，我們也將100指定為網頁高度的百分比。

更進一步，我們需要進行一些數學計算以精確測量頁面高度。

/* 精確測量屏幕高度 */
:root {
--vh: calc(var(--vh, 1vh) * 100);
}
@media (min-width: 320px) {
:root {
--vh: calc(100vh - 40px);
}
}
@media (min-width: 375px) {
:root {
--vh: calc(100vh - 55px);
}
}
@media (min-width: 414px) {
:root {
--vh: calc(100vh - 6rem);
}
}
@media (min-width: 768px) {
:root {
--vh: calc(100vh - 90px);
}
}

上述代碼將根據不同的設備大小和分辨率進行修正，以確保最佳可視結果。

在處理手機端高度問題時，請務必牢記這些技巧。與桌面應用程序不同，手機設備的像素密度和屏幕大小隨時都可能發生變化。