티스토리 모바일웹 설정 및 이미지 확대 기능

블로그를 운영하려면 모바일에 대한 고려는 필수적입니다. 이번에는 모바일웹 설정과 모바일에서의 이미지 확대 기능에 대해 알아보겠습니다.

 

모바일 버전 차이점

 

모바일 버전은 url에 m이 들어갑니다.

티스토리 모바일 버전에는 "꾸미기 > 스킨 편집 > html 편집"으로 설정한 내용이 반영이 안되고 있습니다.

	[데스크탑 버전] https://bestwizard.tistory.com/	[모바일 버전] https://bestwizard.tistory.com/m/

 

	[데스크탑 버전] https://bestwizard.tistory.com/	[모바일 버전] https://bestwizard.tistory.com/m/

 

"꾸미기 > 스킨 편집 > html 편집"에서 추가한 로직을 블로그 글에서 사용할 경우, 모바일 버전에서 실행이 안될 수 있습니다.

제 경우, jQuery로 작성한 글 몇 개가 모바일 버전에서 실행이 안되고 있어서 "꾸미기 > 스킨 편집 > html 편집"에 추가한 로직을 블로그 글에도 추가해서 해결했습니다.

 

하나의 블로그를 데스크탑 버전과 모바일 버전으로 모두 관리해야 해서 불편한 것 같습니다.

 

 

모바일웹 설정

 

티스토리 관리 화면에서 "꾸미기 > 모바일"을 클릭하면 "모바일웹 설정" 화면이 보입니다.

 

"티스토리 모바일웹 자동 연결을 사용하지 않습니다."는 말은 모바일에서 사용할 경우 "https://[티스토리 url]/"를 "https://[티스토리 url]/m/"로 리다이렉트 하지 않겠다는 의미입니다.

 

하지만, "https://[티스토리 url]/m/"으로 접속한 경우, "https://[티스토리 url]/"로 전환하는 것은 불가능하다고 합니다.

불가능하다기보다는 권장하지 않는다에 가까운 것 같습니다.

 

최근 대부분의 웹사이트는 반응형 웹 디자인으로 제작되어 있기 때문에, 모바일에서도 적절하게 보이고 잘 작동합니다.

저는 모바일에서도 'https://[티스토리 url]/'에 접속할 수 있도록 "티스토리 모바일웹 자동 연결을 사용하지 않습니다."로 설정했습니다.

 

반응형

 

모바일 이미지 확대 설정

 

모바일에서는 이미지 사이즈 확대가 필수인 것 같습니다.

 

"꾸미기 > 스킨 편집 > html 편집"에서 viewport에 대한 meta 태그를 찾아서 "user-scalable=no"를 yes로 변경하고 "maximum-scale=1.0"를 삭제하면 됩니다.

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

를 다음과 같이 수정하면 됩니다.

<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, width=device-width">

 

이렇게 하면 모바일 사용자의 이탈률이 조금 줄어들지 않을까 싶습니다.

 

---

참조 사이트

https://blog.naver.com/lswhh/223096681421

티스토리 블로그가 모바일에서 이미지 확대/축소 안되는 원인과 수정 방법