이 글에서는 에 대해서 설명합니다. 이 글에서는 티스토리 블로그가 모바일에서 이미지 확대 축소가 되지 않는 이유와 확대를 할 수 있는 방법에 대해서 설명합니다.
- 티스토리 블로그가 모바일에서 이미지 확대/축소 문제
- 티스토리 블로그가 모바일에서 이미지 확대/축소 되도록 수정하는 방법
티스토리 블로그가 모바일에서 이미지 확대/축소 문제
티스토리 블로그의 헤드 부분에 뷰포트를 정의하는 메타 태그가 포함되어 있습니다.<meta name="viewport"> 태그는 웹 페이지의 뷰포트를 제어하는 데 사용됩니다. 뷰포트란 사용자가 볼 수 있는 웹 페이지의 영역입니다. 해당 태그는 웹 페이지가 다양한 기기(모바일, 태블릿, 데스크탑 등)에서 원활히 작동하게 하기 위해 사용됩니다.
name 속성은 메타데이터 이름을 정의하고 content 속성은 실제 값을 정의합니다.
이 코드에서 name 속성은 viewport이고 content 속성 값은 다음과 같이 구성됩니다.
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
user-scalable=no: 사용자가 페이지를 확대/축소할 수 있는지 여부를 제한합니다. "no"는 사용자가 페이지 확대/축소를 할 수 없습니다.initial-scale=1.0: 화면이 처음 표시될 때 페이지의 확대/축소 비율을 지정합니다. 값이 1.0이면 페이지가 고정 크기의 콘텐츠를 사용하려는 기기의 화면 크기에 맞게 표시됩니다.maximum-scale=1.0: 사용자가 페이지를 확대할 수 있는 최대 배율 값을 설정합니다. 여기서는 콘텐츠가 원래 크기의 배율로 유지되기 때문에 화면을 확대하는 것이 불가능합니다.minimum-scale=1.0: 사용자가 페이지를 축소할 수 있는 최소 배율 값을 설정합니다. 여기서는 콘텐츠가 축소되지 않아 화면 크기를 축소하는 것이 불가능합니다.width=device-width: 웹 페이지의 폭을 기기의 스크린 폭에 맞게 조절합니다.
이 <meta> 태그는 기기의 화면 크기에 맞게 웹 페이지 크기가 조절되도록 만들고, 사용자의 핀치 줌 제스처를 통한 확대/축소를 막습니다. 이는 반응형 웹 디자인에서 중요한 요소이며, 모든 유형의 기기에서 좋은 사용자 경험을 제공하기 위해 설정하는 데 주로 사용됩니다.
티스토리 블로그가 모바일에서 이미지 확대 축소 되도록 수정하는 방법
티스토리 블로그가 모바일에서 이미지 확대 축소 되도록하기 위해서는 위에서 설명한 메타태그를 아래와 같이 수정해 주면 됩니다.
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, width=device-width">
티스토리 블로그의 관리 > 스킨편집 > html 편집으로 들어갑니다.
위와 같이 viewport 메타태그를 찾아서 user-scalable 항목을 yes로 maximum-scale을 제거해 주면 모바일에서 이미지를 확대/축소 할 수 있습니다.
추가하여 관리 페이지에서 다음의 항목을 모바일을 사용하지 않도록 수정해야합니다.
테스트 결과 meta 태그의 항목을 아무리 바꿔도 위의 모바일웹 자동연결을 해 놓은 경우 확대가 되지 않습니다.
위의 두 가지를 모두 적용해야 모바일에서 확대해서 이미지를 크게 보실 수 있습니다.
테스트 결과 모바일 페이지를 사용하면 확대가 안됩니다.
.png)
