viewport 해상도 - 모바일 PC화면

 

 

굳이 저는 반응형으로 일부러 안바꾸고 있는데

모바일 사용자도 많기는해서 교체하면 좋은부분도 있겠지만

 

좌측에 카테고리가 있는게 좋아요.

이 카테고리도 일정 모바일 화면에서는 안보이게 가려버릴수도 있지만

거기에 대한건 다음에 시간날때 써보기로 하고

 

이번에는

" 모바일 PC화면을 설정하는 ViewPort 에 대해서 알아볼까 합니다.

 

 

 

 

아래의 화면처럼 모바일 PC화면에서는 화면이 잘려나와서

보통은 반응형 웹을 쓰는경우가 많은데

 

지금 제 블로그의 경우에는 반틈은 반응이고 아니라고해야될까?

좌측에 카테고리란은 300폭으로 고정이기 떄문이죠

 

 

 

 

 

이제 간혹 이런식으로 모바일 스킨도 지원하긴 하지만

모바일 PC화면으로보면 자신의 블로그가 다 짤려서 반이상이 안보이는 경우가 있는데

 

이부분은 HTML/CSS 에서 수정을 해줘야 합니다.

 

저도 처음에 이 스킨을 사용하면서 여러가지

제 입맛대로 고치고 수정해서 지금까지 왔는데

 

아래에 방법을 설명하니 쉬우니 따라오기만 하세요

 

 

 

우선 티스토리 관리로 들어가서

HTML/CSS 편집을 클릭해줍니다

 

 

 

 

HTML 란에 보면 메타값이 있는데

 

간략하게 말하면

 

 

initial-scale

화면에 비춰지는 기본화면을 말합니다.

기본값이 1이지만 저는 0.29 정도로 했을 때 제 블로그와 딱 맞고 보기가 좋았어요

 

 

Maximum-scale

모바일에서 드레그엔 드롭하여 화면을 확대할 수 있는 배율을 말합니다

 

저의 경우 1.5정도가 적당해보이더군요

 

 

Minimum-scale

축소 배율값입니다. 저는 initial-scale 과 동일한 값을 줬습니다

 

 

그리고 중요한건

user-scalable=yes 인데 no로 설정해두면 모바일에서

화면 확대 축소가 안됩니다.

 

화면을 늘리고 줄이고를 원한다면 Yes 값을 줘야겠지요?

 

 

 

 

이런 방법으로 뷰포트값을 HTML로 수정해주시면

정상적인 모바일 PC화면을 볼 수 있습니다.

 

본문의 경우 반응형으로 자동으로 맞춰지기에

보는게 큰 무리가 없게되고

 

사이드 메뉴의 경우에도 모바일화면으로 전환해서 보던지 아니면 확대기능이 있기에

조금은 불편하더라도 블로그 사용에는 큰 문제가 없어지게 됩니다.

 

 

제대로 된 반응형웹을 사용하면 좋기야 하겠지만

최근에 바꿔볼까 고민하던 스킨이 있었는데, 결국은 기존의 스킨이 더 마음에 들더군요.

 

앞으로 계속쓸지 블로그 스킨을 대대적으로 바꿀지는 미지수네요.