728x90
반응형
[JavaScript] 모바일 크롬, 인터넷 전체화면(F11) 하는 방법 !!
아래 코드로 모바일 환경에서도 전체화면 모드를 설정해보세요 :)
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="fullscreen" href="#" title="전체화면" onclick="openFullScreenMode()">
전체화면
</button>
<button class="close-fullscreen" href="#" title="창모드" onclick="closeFullScreenMode()">
창모드
</button>
</body>
</html>
<script>
let doc = document.documentElement;
// 전체화면 설정
function openFullScreenMode() {
if (doc.requestFullscreen)
doc.requestFullscreen();
else if (doc.webkitRequestFullscreen) // Chrome, Safari (webkit)
doc.webkitRequestFullscreen();
else if (doc.mozRequestFullScreen) // Firefox
doc.mozRequestFullScreen();
else if (doc.msRequestFullscreen) // IE or Edge
doc.msRequestFullscreen();
}
// 전체화면 해제
function closeFullScreenMode() {
if (document.exitFullscreen)
document.exitFullscreen();
else if (document.webkitExitFullscreen) // Chrome, Safari (webkit)
document.webkitExitFullscreen();
else if (document.mozCancelFullScreen) // Firefox
document.mozCancelFullScreen();
else if (document.msExitFullscreen) // IE or Edge
document.msExitFullscreen();
}
</script>728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript & jQuery] 특정 태그에 width 값 변경 및 주는 방법 !! (0) | 2023.02.27 |
|---|---|
| [JavaScript] 자바스크립트 원하는 소수점 표시하는 방법 !! (0) | 2023.02.26 |
| [JavaScript] 이모지(Emoji) 정규식을 이용하여 제거하는 방법 !! (0) | 2023.02.21 |
| [JavaScript] html에 숫자 콤마(,) 표시하는 정규식 사용 방법 !! (0) | 2023.02.12 |
| [JavaScript] 자바스크립트 <div>, <span> 태그에 text 넣는 방법 !! (0) | 2023.02.09 |
댓글