이 글에서는 티스토리 블로그가 모바일에서 이미지 확대 축소가 되지 않는 이유와 확대를 할 수 있는 방법에 대해서 설명합니다.
- 티스토리 블로그가 모바일에서 이미지 확대 축소가 되지 않는 이유
- 티스토리 블로그가 모바일에서 이미지 확대 축소 되도록 수정하는 방법
티스토리 블로그가 모바일에서 이미지 확대 축소가 되지 않는 이유
티스토리 블로그의 head에는 아래와 같은 코드가 존재합니다.
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
이 HTML 코드는 뷰포트(Viewport)를 정의하는 <meta> 태그를 포함하고 있습니다. 뷰포트는 모바일 디바이스에서 웹사이트를 볼 때, 스크린에 표시되는 영역을 의미합니다.
name 속성은 메타데이터의 이름을 정의하며, content 속성은 실제 값을 정의합니다. 이 코드에서는 name 속성이 viewport 이고, content 속성의 값은 다음과 같이 구성됩니다:
- user-scalable=no: 사용자가 줌인/아웃을 할 수 없도록 설정합니다.
- initial-scale=1.0: 초기 화면 배율을 1.0으로 설정합니다.
- maximum-scale=1.0: 사용자가 줌인할 때, 화면 배율을 1.0으로 제한합니다.
- minimum-scale=1.0: 사용자가 줌아웃할 때, 화면 배율을 1.0으로 제한합니다.
- width=device-width: 뷰포트의 너비를 디바이스의 화면 너비로 설정합니다.
이 메타 태그는 모바일 디바이스에서 웹사이트를 사용자 친화적인 방식으로 렌더링하기 위해 존재하지만 줌인/아웃을 할 수 없도록 되어있습니다.
티스토리 블로그가 모바일에서 이미지 확대 축소 되도록 수정하는 방법
티스토리 블로그가 모바일에서 이미지 확대 축소 되도록하기 위해서는 위에서 설명한 메타태그를 아래와 같이 수정해 주면 됩니다.
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, width=device-width">
이를 하기 위해서 티스토리 블로그의 관리 > 스킨편집 > html 편집으로 들어갑니다.
위와 같이 user-scalable 항목을 yes로 maximum-scale을 제거해 주면 모바일에서 이미지를 확대/축소 할 수 있습니다.
추가로 한가지 더 설정해야하는것이 있는데 관리 페이지에서 다음의 항목을 모바일을 사용하지 않도록 수정해야합니다.
테스트 결과 meta 태그의 항목을 아무리 바꿔도 위의 모바일웹 자동연결을 해 놓은 경우 확대가 되지 않습니다.
위의 두 가지를 모두 적용하시면 모바일에서 확대해서 이미지를 크게 보실 수 있습니다.
.png)
