スマートフォンの画面いっぱいに要素を表示する際に、アドレスバーやタブバーを考慮する必要があります。これらのバーは画面の一部を占めてしまうため、100vhだけではうまくいかないことがあります。以下は、アドレスバーやタブバーを考慮した画面いっぱいに要素を表示する方法です。
サンプルコード
JavaScriptを使用して、ビューポートの実際の高さを取得し、それを用いて要素の高さを設定します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.full-screen-element {
height: 100vh; /* Fallback for browsers that do support vh units */
height: calc(var(--vh, 1vh) * 100);
background-color: #f0f0f0; /* Just for visualization */
}
</style>
</head>
<body>
<div class="full-screen-element"></div>
<script>
// Set the --vh custom property to the actual viewport height
function setViewportHeight() {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
// Set initial height on page load
setViewportHeight();
// Update height on window resize
window.addEventListener('resize', setViewportHeight);
</script>
</body>
</html>上記の例では、–vhというカスタムプロパティを使用して、calc関数で実際のビューポートの高さを取得しています。
