티스토리 반응형 스킨을 위한 모바일 메타 뷰포트 태그 업데이트 (with 친효스킨)
모바일 웹 퍼블리싱 작업을 위해서 HTML 문서 내에 있는 <head> 안쪽에 다음의 메타 태그를 삽입하면 두 손 가락을 사용한 핑거스냅 사용을 할 수 있습니다. 확대 혹은 축소가 가능해집니다. 친효스킨에도 다음의 메타태그가 적용이 되어 있지만 최근에 이 메타태그가 업데이트가 된 모양입니다. HTML는 웹문서로서 버전이 있는데 시간이 지날수록 버전은 올라갑니다. 그러면서 잘 쓰이지 않는 구형의 코드들은 점점 사라지고 있습니다. 새롭게 추가되는 신형 태그(요소) 혹은 메타태그들이 있으면 기왕이면 사용해주는것이 좋을 것입니다. 앞으로의 무궁한 발전을 위해서지요. 거두절미하고 어떤 메타 태그인지 살펴보겠습니다.
뷰포드 살펴보기
구형 : <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
신형 : <meta name="viewport" content="width=device-width, initial-scale=1">
친효스킨에서는 구형의 메타 뷰포트 코드가 삽입되어 있습니다. 작년까지는 정말 잘 되었는데 오늘 확인해보니 정상적으로 동작을 하지 않음을 인지했습니다. 스마트폰의 크롬 앱으로 확인한 결과입니다. 본문에서 핑거 제스처료 두 손가락을 사용하여 확대하려해도 되지 않았습니다. 참고로 티스토리앱은 논외로 합니다. 티스토리앱은 정해진 스타일대로만 출력됩니다. 이건 별개의 문제이므로 메타 뷰포트와는 관계가 없습니다.
구형의 메타 뷰포트를 신형으로 변경해주시면 친효스킨에서도 아무 문제 없이 정상 작동함을 확인했습니다. 스마트폰에서, 태블릿에서 확대/축소가 잘 됩니다. 친효스킨 2.4 버전 이상부터는 신형으로 제작되어있습니다. 이 전 버전 사용자분들은 수동으로 변경해 주시기 바립니다.
뷰포트 속성
content="" 의 큰 따옴표 안쪽에 들어가는 속성 종류는 다음과 같습니다.
width ▶ device-width (디바이스의 디스플레이 가로 크기에 맞추겠다고 선언함)
height ▶ device-height (디바이스의 디스플레이 세로 크기에 맞추겠다고 선언함)
initial-scale ▶ 0~10 (배율)
minimum-scale ▶ 0~10 (최소 확대 크기 / 배)
maximum-scale ▶ 0~10 (최대 확대 크기 / 배)
user-scalable ▶ yes / no (확대기능 사용유무)
대다수 0부터 10까지의 값을 입력하는 항목에서는 1을 입력합니다. 또한 user-scalable을 별도로 추가 입력하지 않으면 yes 상태가 됩니다. 특히 initial-scale은 배율의 의미이기에 값을 1로 세팅하는게 좋습니다. 만약 최소 및 최대 확대 크기의 값을 똑같이 1로 입력했다면 서로 같은 값이기에 확대되거나 축소되지 않게 됩니다. 이 원리를 잘 이해해주시기 바랍니다. 끝.
