티스토리 블로그 모바일버전 이미지 확대 축소 안될때

안녕하세요 

블로그 글을 작성할 때 사진 또는 이미지를 삽입하게 됩니다. 

정보 전달을 효과적으로 하기 위해 이미지 삽입은 필수인데요.

삽입한 이미지를 PC 버전에서 볼 때는 불편함이 없습니다.

하지만 모바일 버전에서는 이미지가 너무 작아서 시안성이 떨어지거나 정보 전달이 안 될 수 있는 문제가 있습니다. 

 

이를 방지하고자 모바일 버전에서 제스처 컨트롤로 이미지를 확대하거나 축소할 수 있는 방법을 소개해 드리도록 하겠습니다. 

 

일단 해결하는 방법은 간단한 스킨 편집으로 해결이 가능했습니다. 

 

 

티스토리 블로그 모바일버전 이미지 확대 축소 하는 법

본인의 티스토리 블로그 스킨 편집에 있는 html 편집으로 들어가 주세요.

viewport 관련 태그를 찾을 수 있는데 찾기 어려우면 CTRL+F 를 눌러 검색해보면  됩니다. 

해당 태그를 찾고나면 태그 처음과 끝에 <!-- 와 -->를 추가해주고 해당 태그가 적용되지 않도록 합니다.

원래 코드가 백업되어 있으면 지워도 상관없지만, 만약을 위해 주석처리 해주시고 문제가 생기면 원래대로 복구해 주시면 됩니다. 

<!--<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />-->

 

 

 

 

다음 줄에 아래와 같이 새로운 코드를 추가해주고 저장을 눌러 HTML 편집을 끝내면 완료입니다.

매우 간단하죠? 

 

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>

 

 

코드 삽입을 완료하고 모바일 기기에서 자신의 블로그에 접속해보면 제스처를 사용해 블로그 전체가 확대／축소가 되는 것을 확인할 수 있습니다. 

 

 

이렇게 간단히 코드를 수정하기만 하면 방문자들이 티스토리를 방문해서 사진, 이미지를 마음껏 확대하고 축소할 수 있으니 불편함을 덜어줄 수 있습니다. 

사실 저도 티스토리에 글을 작성하고 이미지를 올릴 때 이미지를 병렬로 나란히 배치하면 시안성이 떨어지지 않을까 고민하고 하나하나 배치한 경험이 있거든요. 

아래로 하나하나 배치하다보면 너무 동떨어져 이미지와 설명에 대한 의미전달이 잘 되지 않는 거 같은 느낌도 들었었고요. 

그런데 이렇게 하면 간단히 문제를 해결할 수 있습니다 .

 

 

이러한 문제를 하나하나 개선해서 방문자들이 체류시간이 늘어나고 정보의 전달이 원할이 이뤄지기를 기대해 봅니다. 

블로그를 하시는 여러분들께서도 크게 어렵지 않으니 한 번씩 적용해 보시기를 추천드립니다. 

감사합니다.