모바일 웹 - 가로화면/세로화면 인식 및 처리 방법 3가지

모바일 기기에서 웹 페이지를 개발할 때는 사용자가 세로와 가로 모드에서 최적의 환경을 경험할 수 있도록 해야 합니다. 여기에는 세 가지 주요 접근 방식이 있습니다: link 태그의 media 속성, CSS 미디어 쿼리, 그리고 JavaScript를 활용한 방법입니다. 각 방법을 자세히 설명하고, 사용 사례와 예시를 추가하여 더 깊이 있게 다루어 보겠습니다.

1. link 태그의 media 속성을 이용한 방법

link 태그의 media 속성을 사용하면 브라우저가 화면 방향에 따라 자동으로 다른 CSS 파일을 적용할 수 있습니다. 이 방법은 간단하게 구현할 수 있어 초기 설정이 중요한 시점에서 매우 유용합니다.

<!-- 세로모드일 때 적용될 CSS -->
<link rel="stylesheet" media="all and (orientation: portrait)" href="portrait.css" />

<!-- 가로모드일 때 적용될 CSS -->
<link rel="stylesheet" media="all and (orientation: landscape)" href="landscape.css" />

이렇게 하면 세로 모드와 가로 모드 각각에 맞춘 디자인을 쉽게 적용할 수 있습니다. 예를 들어, 세로 모드에서는 글꼴 크기를 크게 하거나 특정 요소의 배치를 변경할 수 있습니다.

2. CSS Media Query를 이용한 방법

CSS 미디어 쿼리를 사용하면 하나의 CSS 파일 내에서도 화면 방향에 따라 다른 스타일을 적용할 수 있습니다. 이 방법은 유연성이 뛰어나며, 미디어 쿼리의 다양한 기능을 활용하여 복잡한 레이아웃 조정도 가능합니다.

@media (orientation: portrait) {
    /* Portrait 모드일 때 적용할 CSS */
    body {
        font-size: 16px;
    }
}

@media (orientation: landscape) {
    /* Landscape 모드일 때 적용할 CSS */
    body {
        font-size: 18px;
    }
}

이렇게 하면 각 화면 방향에 맞게 글꼴 크기나 간격 등을 조정할 수 있습니다. 예를 들어, 가로 모드에서는 더 넓은 공간을 활용해 텍스트를 크게 표시할 수 있습니다.

3. JavaScript를 이용한 방법

JavaScript를 사용하면 화면 방향 변화에 따라 동적으로 스크립트를 실행할 수 있습니다. 이 방법은 특정 기능을 세밀하게 제어하거나 사용자 경험을 개선하는 데 유용합니다.

if (window.matchMedia('(orientation: portrait)').matches) {
    // Portrait 모드일 때 실행할 스크립트
    console.log('세로 모드입니다.');
} else {
    // Landscape 모드일 때 실행할 스크립트
    console.log('가로 모드입니다.');
}

// 화면 방향 변경 감지하여 스크립트 실행
window.addEventListener('orientationchange', function() {
    if (window.matchMedia('(orientation: portrait)').matches) {
        // Portrait 모드일 때 실행할 스크립트
        console.log('세로 모드로 변경되었습니다.');
    } else {
        // Landscape 모드일 때 실행할 스크립트
        console.log('가로 모드로 변경되었습니다.');
    }
});

JavaScript를 이용하면 화면 방향이 변경될 때마다 특정 작업을 수행할 수 있습니다. 예를 들어, 화면 방향에 따라 스크롤 이벤트를 추가하거나 특정 컴포넌트를 조작할 수 있습니다.

추가 고려사항: viewport 설정

마지막으로, 모바일 환경에서는 반드시 viewport 설정을 적절히 해야 합니다. 이는 사용자가 장치에 맞춰 웹 페이지를 정확히 볼 수 있도록 도와줍니다.

<meta name="viewport" content="user-scalable=no, width=device-width">

위 설정은 사용자가 확대/축소를 할 수 없도록 막고, 장치의 너비에 맞춰 웹 페이지를 표시합니다. 이는 모바일 환경에서의 최적화된 사용자 경험을 제공하는 데 중요합니다.

이렇게 다양한 방법을 조합하여 모바일 화면에 최적화된 웹 개발을 할 수 있습니다. 각 방법은 상황에 따라 선택하여 적절히 활용하는 것이 좋습니다. 사용자 경험을 고려하여 세밀하게 조정하면 모바일 사용자들에게 더욱 만족스러운 환경을 제공할 수 있습니다.

// 사용자의 크기조절 방지, 너비를 장치의너비로 설정 (default width 는 980px 임)
<meta name="viewport" content="user-scalable=no, width=device-width"/>

관련링크

https://studiomeal.com/archives/1068

웹페이지 가로 모드/세로 모드 인식하기

https://stove99.tistory.com/77

모바일 페이지 작성시 가로,세로 모드에 따라 다른 css 파일 적용시키기

https://aboooks.tistory.com/352

meta viewport (메타 뷰포트 태그) 사용법