[🎨썸네일 메이커] 모바일 미지원 안내

모바일 접속시 디자인 깨짐

 

🔔 안내 🔔

썸네일 메이커를 모바일에서 접속하면 이렇게 다~ 잘려서 보입니다.

물론 반응형 웹 디자인을 하면 되지만, 지금은 어떻게 할 수 없는 관계로

 

"모바일 접속 지원을 종료합니다"

 

혹시나 반응형으로 디자인하게 된다면 모바일도 접속이 가능하도록 업데이트를 할 예정입니다.

 

🔥 자바스크립트

모바일 접속 불가를 알려주는 알림창을 띄우고,

그 알림창의 확인을 누르면 이 포스팅으로 연결되도록 코드를 만들었습니다.

 

function isMobile() {
    var temp = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (temp === true) {
        alert("이 사이트는 모바일 접속을 지원하지 않습니다.");
        location.href = "https://eggjini.tistory.com/9"
    }
}
 
window.onload = function () {
    isMobile();
}

 

 

파이어폭스에서 User Agent 를 변경하고 접속해 보니 이렇게 알림창이 뜹니다.

Android, IOS는 물론 다른 모바일 환경에서 접속해도 이 알림창이 뜨게 됩니다.

 

 

멘트만 좀 바꿔서 사이트에 적용했습니다.

참고로 소스코드는 전체 공개됩니다. (깃허브에 있어요)

 

https://github.com/Eggjini/banner-maker

GitHub - Eggjini/banner-maker: 🎨 썸네일 메이커

 

https://eggjini.github.io/banner-maker/

🎨 썸네일 메이커