애드센스 광고가 휴대폰 화면보다 커서 본문 화면이 밀려 나갈 때
애드센스 광고가 휴대폰 화면보다 넓어 휴대폰 화면이 고정되지 않고 화면이 옆으로 밀려나는 현상이 나타날 때가 있습니다. 이런 현상이 잦으면 모바일 편의성 문제로 오류 알림이 날아오기도 합니다. 일반적으로 블로그나 다른 사이트는 휴대폰 폭에 맞춰서 자동으로 줄어듭니다. 하지만 어떤 이유로 광고가 휴대폰 화면으로 줄어들지 않은 상태로 노출이 되면서 광고 화면에 휴대폰 화면이 맞춰지는 현상이 나타납니다. 그래서 휴대폰 화면이 옆으로 드래그가 되면서 빈 화면이 보이게 되죠.
콘텐츠 화면이 휴대폰 화면보다 넓어서 나타나는 현상으로 캡처 화면을 보겠습니다.
애드센스 광고가 모바일에서 옆으로 밀리는 현상이 나옵니다. 본문 글 때문에 휴대폰 화면이 밀리는 것은 아닐 겁니다. 애드센스 광고가 반응형 피부의스킨의 경우는 좌우 여백 없이 가로 폭이 화면 크기와 같은 광고가 나오게 되는데 이때 뿌려지는 광고가 제대로 반응하지 못해 화면 밖으로 튀어 나가는 불상사가 생겼는지도 모릅니다. 정확한 원인은 알 수 없으나 이런 원인이라면 시도해 볼 만한 방법이 있습니다.
애드센스 광고가 좌우 여백 없이 보입니다.
이 광고를 둘러싸고 있는 테두리가 보입니다.
광고의 크기를 일정한 크기로 만들어 버리면 모바일 화면에 맞는 광고만 노출이 되겠죠. 광고 크기가 작은 것은 작은 대로 큰 것은 휴대폰 화면 이상으로는 넓은 폭을 가지지 못할 겁니다.
반응형 애드센스 코드입니다.
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-123456789"
data-ad-slot="123456789"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
위의 소스 중에서 이 부분
data-full-width-responsive="true">을
data-full-width-responsive="false">로 바꾸어 넣습니다. 휴대폰 화면이 옆으로 밀리는 현상이 광고 크기가 제대로 작동하지 않아서 나타나는 문제라면 해결될 수 있습니다.
그리고 이렇게 휴대폰 폭 이상으로 튀어 나가는 것이 또 있는데요, 티스토리에서 자주 나타나는 현상입니다. 이런 이유로 모바일 사용 편의성 오류 알림이 나오는 내용입니다. 이전 포스팅을 참고하세요.