[티스토리] 블로그 모바일 화면 및 사진 이미지 확대 Zoom 기능 (viewport)

 

안녕하세요.

나만의 선별된 알쓸신잡 블로그

랜드이스트 입니다.

 

 

 

 문제 발생 

블로그 관리를 하다보면

다들 블로그 포스팅을 한 직 후

글이 잘 올라갔는지 몇번째로 나오는지

확인하시죠?

^^

 

확인을 하다보니

제 블로그 글들이 모바일에서

첨부한 이미지를 클릭했을때

팝업창 처럼 크게 나오지도 않고

손가락으로 확대시키는 기능도

되지 않더라구요.

 

PC에서는 이미지를 클릭했을때

팝업창처럼 확대되어 뜨던데

모바일에서는 안되고 있다는걸

이제서야 알게 되었답니다.

ㅠㅠ

 

그래서

저와 같은 문제를 겪는 분들이

분명 또 있을거라 생각해서

포스팅을 남기기로 했습니다.

 

 

 

 

 동일한 문제 찾아보기 

다른 티스토리 블로그 확인

혹시 나만 안되는 것인지

다른 티스토리 블로그에 들어가

일일이 확인해본 결과

 

분명 다른 블로그에서는

구현되는 기능인데

제 블로그에서는 구현되지 않아서

그 해결방법을 찾아봤습니다.

 

 

 

 문제점 발견 

혹시 앱으로 확인했나요?

티스토리 앱에서

내 글 확인시 이미지를 터치 하면

팝업창처럼 크게 나오지 않는데

 

네이버/다음 같은 포털에서

내 글을 검색하여 들어가 보면

이미지를 터치했을때

팝업창처럼 크게 나온답니다.

 

 

만약 이 방법이 안된다면?

티스토리 관리자 페이지에서

플러그인 중

'이미지크게보기(Light TT EX)'을

적용시켜 줍니다.

< 이 플러그인을 클릭 >

 

< 플러그인을 적용 시켜줍니다 >

 

해결 되셨나요?

참 쉽죠?

^^

 

 

 

 

 또 한가지 문제점 

이미지 확대 문제

이미지를 터치 했을때

팝업창처럼 크게 나오긴 하지만

이미지를 더 크게 보고싶을때

손가락으로 확대가 안됩니다.

 

그 부분을 해결하기 위해

또한번 폭풍 검색을 했습니다.

 

 

HTML수정

'관리자>꾸미기>스킨편집>HTML편집'

순으로 찾아 들어갑니다.

 

 

기존 소스코드 검색

ctrl + F로 viewport를 검색하여

기존 viewport부분을 찾아내서

삭제하거나 숨김처리 후

아래의 소스코드를 붙여넣습니다.

( 저는 숨김처리를 했습니다 ^^ )

< viewport 소스코드 수정 >

 

 

모바일 확대 ON

아래 소스코드를

그대로 복사 붙여넣기 합니다.

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

 

 

모바일 확대 OFF

아래 소스코드를

그대로 복사 붙여넣기 합니다.

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

 

 

용어 설명

viewport 영역에 사용되는

기능들 입니다.

initial-scale : 초기 줌 배율 설정
maximum-scale : 최대 줌 배배 설정
minimum-scale : 최소 줌 배율 설정
user-scalable : 사용자가 확대/축소 가능여부

 

 

 

 마치며 

그냥 처음부터 되는 분들은

문제 없겠지만

여기까지 찾아 들어왔다면

저와 동일한 문제를 겪는거겠죠?

 

제 포스팅이 작게나마

도움이 되었으면 좋겠습니다.

^^

 

그럼 오늘은 여기까지.