본문 바로가기

유용한 정보 궁금~

티스토리, 핸드폰에서 사진 확대 가능하게 하는 법

썸네일

데스크탑으로 티스토리를 볼 때는 모니터가 크므로 사진이나 글씨를 볼 때 큰 불편함이 없지만,

핸드폰으로 포스팅을 볼 때 사진을 확대해서 보고 싶으면, 사진을 클릭해서 두 손가락으로 확대해서 보게 됩니다.

그래서 저는 티스토리에서 당연히 사진이 확대가 되는 줄 알았습니다.

그런데 알아보니, 티스토리에서는 기본세팅이 사진 확대가 안되게 되어있어, 사진을 터치 후 손가락으로 확대해도 확대가 되지 않습니다. 

오늘은 html 코드를 변경하여 모바일에서 사진 및 글씨 확대할 수 있게 하는 법을 알아보겠습니다.

 

글자 및 사진 코드 수정

전에는 사진을 확대할 수 있는 플러그인이 있었던 것 같은데, 이유는 모르겠지만, 보이지 않았습니다.

그래서 html에서 직접 코드를 수정해야 합니다.간단하므로, 누구나 쉽게 할 수 있습니다.

1. 기존 viewport 코드 주석처리

티스토리에서 블로그관리홈 > 꾸미기 > 스킨편집 으로 갑니다.

스킨편집
스킨편집

 

오른쪽 스킨편집에 html편집을 선택합니다.

html편집
html편집

 

HTML에서 ctrl + F를 눌러 viewport를 검색합니다.

그러면

meta name="viewport" content="user-scalable=no.............. width=device-width"> 

라고 나오는데요, 그 부분을 주석처리 합니다.

html의 주석처리는 

코드의 맨 앞에 <!--

코드의 맨 뒤에  -->

를 입력하면 됩니다.

따라서 아래와 같이 빨간색 부분을 입력하면 됩니다.  

<!--meta name="viewport" content="user-scalable=no.............. width=device-width"> -->

 

2. 새로운 viewport 코드입력

기존의 설정을 주석처리하여 작동하지 않게 하였으므로,

이제 사진이나 글자가 확대할 수 있게 하는 코드를 추가합니다.

그냥 아래 코드를 복사하여 붙여넣기 하면 됩니다.

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

저는 언제, 왜 코드를 주석처리 했는지 표시하기 위해 주석에 약간의 내용을 적어줍니다.

ex. <!--사진확대 코드추가 2022.08.12-->

그래서 저는 아래 그람과 같이 기존코드를 주석처리 하였고, 새로운 코드를 넣었습니다. 

최종수정
최종수정

 

그리고 적용을 누르고, 모바일에서 내 글을 확인해 보면, 사진 및 글자가 손가락으로 확대가 되는 것을 볼 수 있습니다.