베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

모바일 기기에서 수평 스크롤 없애기

Last Updated: 2021년 6월 16일 | 9개 댓글
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기
Horozontal-Scroll-in-Mobile-Device

모바일 장치에서 수평 스크롤 없애기

모바일 웹에서 수평 스크롤(가로 스크롤)이 있을 경우 위의 그림과 같이 화면을 터치하여 왼쪽으로 이동시키면 사이트가 좌우로 움직이게 되어 매우 불편하게 됩니다. 모바일 기기에서 수평 스크롤을 비활성화하여 이 문제를 해결할 수 있습니다.

모바일 기기에서 수평 스크롤이 되는 경우 다음과 같은 조치를 취해보도록 합니다.

우선 다음 메타 태그를 header에 추가합니다. (이미 있는 경우 기존 것을 대체합니다.)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">

어떤 사용자는 content="initial-scale=1.0; maximum-scale=1.0;를 삭제하니 문제가 해결된다고도 하네요.

<meta name="viewport" content="user-scalable=0;"/>

아이폰 등 Apple iOS 기기에서 문제가 나타나는 경우 다음 메타 태그를 추가하도록 하도록 합니다.

<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" />

iOS 기기에서의 문제에 대해서는 이 stackoverflow 글에서 자세한 내용을 확인해볼 수 있습니다.

저는 위의 방법으로도 모바일 기기에서 가로 스크롤이 없어지지 않았습니다. 대신 다음과 같은 CSS 코드를 스타일시트 파일(style.css)에 추가하니 문제가 해결되었습니다.

/* 모바일 수평 스크롤 금지 */
html, body {
max-width: 100%;
overflow-x: hidden;
}

이외에도 다음과 같은 CSS 코드를 시도해볼 수 있습니다.

body {
overflow: hidden;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

이상으로 모바일 기기에서 수평 스크롤이 생기는 경우에 수평 스크롤을 없애는 방법에 대해 살펴보았습니다.

참고



9 개 댓글

Leave a Comment

  1. 안녕하세요! 애드센스 수직형 광고 가장자리가 모바일에서 자꾸 잘리는 바람에 수평스크롤 문제인가 해서 요 방법 적용해보았는데 해당 광고가 송출되지 않더라구요. 혹시 이 경우에 좀 더 기다리면 크기에 알맞는 광고가 송출될까요?

    응답
    • 자동 광고를 표시하고 계시나요? 자동 광고를 표시할 경우 일부 워드프레스 테마에서 광고가 이상하게 표시되는 경우가 있습니다. (이런 문제는 워드프레스뿐만 아니라 티스토리 스킨 등에서도 비슷하게 발생할 수 있습니다.)

      먼저는 유료 테마인 경우 테마 판매자에게 문의하여 문제 해결을 시도해볼 수 있을 것입니다.
      만약 테마 개발자를 통해 문제를 해결할 수 없다면 자동 광고 기능을 해제하고 수동으로 광고를 배치하는 것을 고려해보시기 바랍니다.

      Ad Inserter와 같은 플러그인을 사용하면 편리하게 광고를 추가할 수 있습니다. Ad Inserter 플러그인을 사용하면 정교하게 광고 배치 위치를 지정하는 것이 가능합니다.

      https://www.thewordcracker.com/intermediate/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-css-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%A0%84%ED%9B%84%EC%97%90-%EA%B4%91%EA%B3%A0-%EC%82%BD%EC%9E%85%ED%95%98%EA%B8%B0/

      모바일용 광고와 PC용 광고를 분리하여 광고 크기를 지정할 수 있습니다.

      응답
  2. 덕분에 일주일 넘게 고민하던 문제를 한 순간에 해결했습니다.(CSS)
    Sticky Plugin이 제대로 작동하지 않아 Support를 요청해서도 해결하지 못한 문제였는데...
    외 나무 다리에서 이런 좋은 정보를 발견할지 정말 몰랐습니다.
    좋은 정보 고맙습니다!

    응답
    • 문제가 해결되어 다행입니다. 새해 복 많이 받으시고 2022년에는 계획하는 모든 일이 잘되고 만사형통하시기 바랍니다.

      응답