티스토리 모바일 접속시 디자인 사라지는 문제 해결법 3가지

모바일로 접속 시 기껏 꾸며놓은 디자인(버튼, 목차, 소제목)이 사라지는 경험한 적이 있을 건데요.

이는 모바일 접속 시 url에 "/m/"이 추가되면서 발생되는 문제입니다.

 

이번 포스팅에서는 이 문제를 해결하기 방법 3가지를 소개합니다.

 

1. 티스토리 초기 세팅

티스토리 설정에서 티스토리 모바일 웹 자동 연결을 "사용하지 않습니다"로 설정합니다.

하지만 설정하였다 하더라도 url에 직접 /m/을 추가하면 여전히 모바일웹으로 들어가게 됩니다.

이럴 땐 /m/ 접속 시 강제로 리다이렉트 하는 방법을 사용해야 하는데요.

 

2. 강제 리다이렉트 방법

자바스크립트를 통해 /m/으로 접근을 하려고 하면 강제로 리다이렉트 시킵니다.

 

3. 본문에 STYLE 적용

스타일 하나 적용하는데 2번 방법은 번거롭다 느끼는 분들도 있을 겁니다.

 

 

아래는 예시로 가져온 버튼 디자인입니다.

아마 모바일 접속 시 스타일이 사라지는 분들은 HTML과 CSS가 분리되어 있는 형태일 텐데요.

이를  HTML과 CSS를 통합시켜 주면 디자인이 사라지지 않고 유지됩니다.

다만 이방식은 마우스를 올렸을 때 발생되는 호버 효과등 복잡한 디자인을 적용하기는 어렵습니다.

 

다소 복잡한 디자인을 적용하고 싶다면 아래와 같이 <style></style> 태그를 본문 안에 집어넣어줄 수도 있습니다.

 

하지만 이 방법 적용 시 주의해야 될 점이 있는데요.

글 편집을 눌러 재 저장하면 <style> 태그가 다 사라져 버립니다.

즉 매번 편집할 때마다 <style>을 적어줘야 하는 번거로움이 있습니다.