모바일 장치에서 수평 스크롤 없애기
모바일 웹에서 수평 스크롤(가로 스크롤)이 있을 경우 위의 그림과 같이 화면을 터치하여 왼쪽으로 이동시키면 사이트가 좌우로 움직이게 되어 매우 불편하게 됩니다. 모바일 기기에서 수평 스크롤을 비활성화하여 이 문제를 해결할 수 있습니다.
모바일 기기에서 수평 스크롤이 되는 경우 다음과 같은 조치를 취해보도록 합니다.
우선 다음 메타 태그를 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;
}
이상으로 모바일 기기에서 수평 스크롤이 생기는 경우에 수평 스크롤을 없애는 방법에 대해 살펴보았습니다.
우선 다음 메타 태그를 header에 추가합니다. (이미 있는 경우 기존 것을 대체합니다.)
이 걸 어떻게 하는지도 모르는 초보입니다 ㅜㅜ 도와주세요
header에 저 코드를 어떻게 추가하죠????
저같은 초보가 저 방법을 배울수 있는 글이 있을가요???
헤더에 코드를 추가하는 방법은 다양합니다.
차일드 테마 사용하기:
... 사이트에 태그를 추가합니다.1. 차일드 테마가 없는 경우 차일드 테마를 만듭니다(참고).
2. FTP를 통해 접속하여 테마 폴더에서 header.php 파일을 PC로 다운로드한 후에, 텍스트 에디터를 열도
3. FTP를 통해 header.php 파일을 차일드 테마 폴더로 업로드합니다.
플러그인을 사용하는 것도 가능합니다.
https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%ED%97%A4%EB%8D%94%EC%99%80-%ED%91%B8%ED%84%B0%EC%97%90-%EC%89%BD%EA%B2%8C-%EC%BD%94%EB%93%9C-%EC%82%BD%EC%9E%85%ED%95%98%EA%B8%B0/
참고로 네이버 카페에서 코칭 프로그램을 운영하고 있습니다. 워드프레스와 웹호스팅, CSS 등에 대한 다양한 질문을 하실 수 있습니다.
https://cafe.naver.com/wphomepage/20094
다음 글에서 header에 코드를 추가하는 다양한 방법이 설명되어 있습니다. 적절한 방법을 이용해보시기 바랍니다.
https://www.thewordcracker.com/basic/%ec%9b%8c%eb%93%9c%ed%94%84%eb%a0%88%ec%8a%a4-%eb%a9%94%ed%83%80-%ed%83%9c%ea%b7%b8-%ec%b6%94%ea%b0%80/
안녕하세요! 애드센스 수직형 광고 가장자리가 모바일에서 자꾸 잘리는 바람에 수평스크롤 문제인가 해서 요 방법 적용해보았는데 해당 광고가 송출되지 않더라구요. 혹시 이 경우에 좀 더 기다리면 크기에 알맞는 광고가 송출될까요?
자동 광고를 표시하고 계시나요? 자동 광고를 표시할 경우 일부 워드프레스 테마에서 광고가 이상하게 표시되는 경우가 있습니다. (이런 문제는 워드프레스뿐만 아니라 티스토리 스킨 등에서도 비슷하게 발생할 수 있습니다.)
먼저는 유료 테마인 경우 테마 판매자에게 문의하여 문제 해결을 시도해볼 수 있을 것입니다.
만약 테마 개발자를 통해 문제를 해결할 수 없다면 자동 광고 기능을 해제하고 수동으로 광고를 배치하는 것을 고려해보시기 바랍니다.
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용 광고를 분리하여 광고 크기를 지정할 수 있습니다.
덕분에 일주일 넘게 고민하던 문제를 한 순간에 해결했습니다.(CSS)
Sticky Plugin이 제대로 작동하지 않아 Support를 요청해서도 해결하지 못한 문제였는데...
외 나무 다리에서 이런 좋은 정보를 발견할지 정말 몰랐습니다.
좋은 정보 고맙습니다!
문제가 해결되어 다행입니다. 새해 복 많이 받으시고 2022년에는 계획하는 모든 일이 잘되고 만사형통하시기 바랍니다.
제 목숨을 구했습니다 복 많이받으세요
도움이 되셨기를 바랍니다.즐거운 하루 보내세요.
좋은 글 참고했습니다. 감사합니다.
데유님, 안녕하세요?
블로그를 방문해주시고 댓글을 남겨주셔서 감사합니다.
즐거운 저녁시간 보내시기 바랍니다 :)
감사합니다. 해맸는데 overflow-x: hidden; 코드 넣으니 바로 해결되네요^^