---
title: "手機網頁100vh v.s. 網址列"
url: https://geminixiang.com/posts/mobile-web-100vh-vs-address-bar/
description: "手機瀏覽器的網址列會讓 100vh 超出畫面：用 window.innerHeight 算出 --vh CSS 變數取代 vh，讓版面剛好填滿可視範圍。"
published: 2022-08-17
category: "Programming"
tags: ["javascript", "tips"]
---

# 手機網頁100vh v.s. 網址列

> 來源:https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

在 JavaScript 中，可以通過使用 `window.innerHeight` 來取得目前顯示畫面的值。該值會包含瀏覽器的界面，並會隨著介面變化去做更新。所以此次的訣竅，是將 `window.innerHeight` 值存在 CSS 變數中，並將該值用來取代 vh 的基本單位。

## CSS

```css
#map {
  height: calc(100vh - 84px);
  height: calc((var(--vh, 1vh) * 100) - 84px);
}
```

## JavaScript

```javascript
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty("--vh", `${vh}px`);

---

## About the author

**Ying Xiang Zhao** (geminixiang) — DevOps Engineer, Taipei, Taiwan.

Ying Xiang Zhao（geminixiang）是住在台北的 DevOps 工程師，工作橫跨雲原生基礎設施、CI/CD、ML 模型部署與全端開發。這個部落格記錄 infra、資安與 AI coding agent 的實戰筆記；作品包含開源專案 mikan（把 AI coding agent 帶進 Slack / Telegram / Discord）與 tiny-agent（用四種語言實作的極簡 coding agent），瀏覽器內的影片編輯器 Studio，並經營旅遊分帳工具 SentriPay。

**Open to work** — DevOps Engineer / Platform Engineer / Site Reliability Engineer / AI Infrastructure Engineer · Taipei, Taiwan / Remote. Résumé: https://geminixiang.com/about/ (JSON: https://geminixiang.com/resume.json)

Topics: DevOps, Cloud Native, Kubernetes, Docker, Terraform, Google Cloud, CI/CD, Security, AI coding agents, ML model deployment, TypeScript, Python

Projects:
- [mikan](https://github.com/geminixiang/mikan) — Self-hosted AI coding agent for Slack, Telegram, Discord and GitHub with per-conversation sandboxes
- [tiny-agent](https://github.com/geminixiang/tiny-agent) — Minimal AI coding agents in TypeScript, Go, Python and Rust, plus a book on how they work
- [SentriPay](https://sentripay.com) — Travel expense splitter with multi-currency conversion and shareable, live-synced trip ledgers
- [Studio](https://studio.geminixiang.com) — Browser-based video editor built on WebCodecs

[About](https://geminixiang.com/about/) · [Résumé](https://geminixiang.com/about/) · [LinkedIn](https://linkedin.com/in/geminixiang/) · [GitHub](https://github.com/geminixiang) · [Twitter](https://x.com/geminixiang)