📖
모바일 디바이스에서 가로모드 또는 세로모드 감지
페이지 정보
본문
1, CSS 미디어 쿼리: CSS를 사용하여 화면 너비에 따라 스타일을 다르게 적용하는 것이 가장 일반적인 방법입니다.
아래는 가로모드와 세로모드에 대한 예제입니다.[code]/* 세로모드 스타일 */
@media screen and (orientation: portrait) {
/* 세로모드에 적용할 스타일 지정 */
}
/* 가로모드 스타일 */
@media screen and (orientation: landscape) {
/* 가로모드에 적용할 스타일 지정 */
}[/code]
2, JavaScript 사용: JavaScript를 사용하여 브라우저의 화면 방향을 확인하고 필요한 작업을 수행할 수 있습니다.[code]if (window.orientation === 0) {
// 세로모드
// 원하는 동작 수행
} else if (window.orientation === 90 || window.orientation === -90) {
// 가로모드
// 원하는 동작 수행
}[/code]위의 코드에서 window.orientation은 브라우저의 화면 방향을 나타내며, 0은 세로모드를, 90 또는 -90은 가로모드를 나타냅니다.
아래 코드는 브라우저의 window.orientation 값을 기반으로 작동하며, 사용자가 디바이스의 방향을 변경할 때마다 실시간으로 반응 합니다.[code]<!DOCTYPE html>
<html>
<head>
<title>화면 방향 감지</title>
</head>
<body>
<script>
function checkOrientation() {
if (window.orientation === 0) {
// 세로모드
// 원하는 동작 수행
} else if (window.orientation === 90 || window.orientation === -90) {
// 가로모드
// 원하는 동작 수행
}
}
// 초기화 및 화면 방향 변경 이벤트 리스너 등록
checkOrientation();
window.addEventListener("orientationchange", checkOrientation);
</script>
</body>
</html>[/code]위의 코드에서 window.addEventListener("orientationchange", checkOrientation); 라인은 디바이스의 방향이 변경될 때마다 checkOrientation 함수를 호출하여 실시간으로 화면 방향을 확인 합니다.
아래는 가로모드와 세로모드에 대한 예제입니다.[code]/* 세로모드 스타일 */
@media screen and (orientation: portrait) {
/* 세로모드에 적용할 스타일 지정 */
}
/* 가로모드 스타일 */
@media screen and (orientation: landscape) {
/* 가로모드에 적용할 스타일 지정 */
}[/code]
2, JavaScript 사용: JavaScript를 사용하여 브라우저의 화면 방향을 확인하고 필요한 작업을 수행할 수 있습니다.[code]if (window.orientation === 0) {
// 세로모드
// 원하는 동작 수행
} else if (window.orientation === 90 || window.orientation === -90) {
// 가로모드
// 원하는 동작 수행
}[/code]위의 코드에서 window.orientation은 브라우저의 화면 방향을 나타내며, 0은 세로모드를, 90 또는 -90은 가로모드를 나타냅니다.
아래 코드는 브라우저의 window.orientation 값을 기반으로 작동하며, 사용자가 디바이스의 방향을 변경할 때마다 실시간으로 반응 합니다.[code]<!DOCTYPE html>
<html>
<head>
<title>화면 방향 감지</title>
</head>
<body>
<script>
function checkOrientation() {
if (window.orientation === 0) {
// 세로모드
// 원하는 동작 수행
} else if (window.orientation === 90 || window.orientation === -90) {
// 가로모드
// 원하는 동작 수행
}
}
// 초기화 및 화면 방향 변경 이벤트 리스너 등록
checkOrientation();
window.addEventListener("orientationchange", checkOrientation);
</script>
</body>
</html>[/code]위의 코드에서 window.addEventListener("orientationchange", checkOrientation); 라인은 디바이스의 방향이 변경될 때마다 checkOrientation 함수를 호출하여 실시간으로 화면 방향을 확인 합니다.
댓글목록
등록된 댓글이 없습니다.
  |