목차
1. 화면 최대화 예제
이 예제에서는 JavaScript를 사용하여 화면을 최대화하는 방법을 설명합니다. startFullScreen 함수는 화면을 전체 화면으로 변경합니다.
<script>
function startFullScreen() {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) { // Firefox
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari, Opera
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.msRequestFullscreen) { // IE/Edge
document.documentElement.msRequestFullscreen();
}
}
</script>
2. HTML 버튼 클릭 시 화면 최대화 예제
이 예제에서는 HTML 버튼을 클릭하여 사용자가 원할 때 화면을 최대화하는 알아보겠습니다. 버튼을 클릭하면 JavaScript 함수가 실행되어 화면이 최대화됩니다.
3. 스크린 크기에 따라 화면 최적화 예제
이 예제에서는 사용자의 디바이스 스크린 크기를 감지하여 자동으로 최적의 화면 모드로 전환하는 방법입니다. 스크린 크기에 따라 최대화, 창 모드 등이 수행됩니다.
<html>
<head>
</head>
<body>
<h1>화면 최적화 예제</h1>
<p>버튼을 클릭하세요.</p>
<button onclick="optimizeScreenMode();">
최적화
</button>
<script>
function optimizeScreenMode() {
var screenWidth = window.innerWidth;
if (screenWidth <= 768) {
// 모바일 화면 크기
document.documentElement.requestFullscreen();
} else if (screenWidth <= 1024) {
// 태블릿 화면 크기
document.documentElement.webkitRequestFullscreen();
} else {
// 데스크탑 화면 크기
document.documentElement.mozRequestFullScreen();
}
}
</script>
</body>
</html>
반응형