<div class="wrapper">
<p>もしフルスクリーン状態ならこの文字列は赤色になる</p>
<button id="requestFull">フルスクリーン表示</button>
<button id="exitFull">フルスクリーン解除</button>
</div>
.wrapper {
min-height: 100vh;
padding: 2rem;
background-color: #fff;
box-sizing: border-box;
}
button {
margin-top: 1rem;
}
:fullscreen p {
color: red;
}
View Compiled
const req = document.getElementById("requestFull");
const exit = document.getElementById("exitFull");
req.addEventListener("click", () => {
if (document.fullscreenEnabled) {
// 全画面モードにする
document.documentElement.requestFullscreen();
}
});
exit.addEventListener("click", () => {
// 全画面モードを解除
if (document.exitFullscreen) {
document.exitFullscreen();
}
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.