반응형
1, CSS 미디어 쿼리: CSS를 사용하여 화면 너비에 따라 스타일을 다르게 적용하는 것이 가장 일반적인 방법입니다.
아래는 가로모드와 세로모드에 대한 예제입니다.
/* 세로모드 스타일 */
@media screen and (orientation: portrait) {
/* 세로모드에 적용할 스타일 지정 */
}
/* 가로모드 스타일 */
@media screen and (orientation: landscape) {
/* 가로모드에 적용할 스타일 지정 */
}2, JavaScript 사용: JavaScript를 사용하여 브라우저의 화면 방향을 확인하고 필요한 작업을 수행할 수 있습니다.
if (window.orientation === 0) {
// 세로모드
// 원하는 동작 수행
} else if (window.orientation === 90 || window.orientation === -90) {
// 가로모드
// 원하는 동작 수행
}위의 코드에서 window.orientation은 브라우저의 화면 방향을 나타내며, 0은 세로모드를, 90 또는 -90은 가로모드를 나타냅니다.
아래 코드는 브라우저의 window.orientation 값을 기반으로 작동하며, 사용자가 디바이스의 방향을 변경할 때마다 실시간으로 반응 합니다.
<!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>위의 코드에서 window.addEventListener("orientationchange", checkOrientation); 라인은 디바이스의 방향이 변경될 때마다 checkOrientation 함수를 호출하여 실시간으로 화면 방향을 확인 합니다.
반응형
'MOBILE' 카테고리의 다른 글
| [Android] Intent 활용 예시 (0) | 2023.10.01 |
|---|---|
| 모바일 디바이스에서 화면 가로세로 변경 시 화면 크기 고정 (0) | 2023.09.26 |
| android permission 정리 (0) | 2023.09.26 |
| 안드로이드에서 비디오 재생하기: MediaPlayer (0) | 2016.11.07 |
| [ANDROID(안드로이드) 앱 개발 기초] MEDIAPLAYER 음악 재생하기 (0) | 2016.11.07 |
| Stream Play online audio mp3 from URL in android without downloading (0) | 2016.11.04 |
| Android VideoView error 처리하기 (0) | 2016.11.04 |
| 안드로이드: 서비스 Service 예제 (0) | 2016.11.04 |
댓글