모바일 사이트 경험 향상: 가로 방향 적용 및 자동 회전 비활성화

모바일 응답성을 위해 디자인할 때 특정 방향이 사용자에게 큰 영향을 미칠 수 있습니다. 경험. 이 질문은 모바일 웹사이트를 가로 방향으로 제한하고 자동 회전을 비활성화하는 솔루션을 모색합니다.

CSS 솔루션

이를 달성하는 한 가지 방법은 CSS 미디어 쿼리를 이용하는 것입니다. 가로 및 세로 방향에 대해 별도의 스타일시트를 만들어 장치 방향에 따라 사이트가 작동하는 방식을 제어할 수 있습니다. 구현 방법은 다음과 같습니다.

1. 두 개의 스타일시트를 만듭니다. 즉, 가로용 style_l.css와 세로용 style_p.css입니다.
2. style_l.css에 표시되는 가로별 스타일을 포함합니다. 사이트의 콘텐츠를 전체 너비로 표시합니다.
3. style_p.css에서 모든 요소를 ​​숨기고 사용자에게 최적의 보기를 위해 기기를 기울이도록 지시하는 메시지를 표시합니다.
4. HTML 헤드 섹션에 다음 코드를 추가합니다. 미디어 쿼리를 사용하려면:

jQuery 솔루션

jQuery를 사용하여 장치 방향을 감지하고 그에 따라 사이트 기능을 변경할 수도 있습니다. 예는 다음과 같습니다.

$(window).on("orientationchange", function() {
  if (window.orientation == 0 || window.orientation == 180) {
    // Landscape orientation
    // Enable landscape-specific features here
  } else if (window.orientation == 90 || window.orientation == -90) {
    // Portrait orientation
    // Show a message to rotate device
  }
});

두 솔루션 모두 효과적으로 가로 전용 방향을 적용하고 모바일 사이트에서 자동 회전을 비활성화하여 의도한 방향으로 최적의 콘텐츠 표시를 보장함으로써 사용자 경험을 향상시킵니다.