Web Guide뷰포트화면 설정모바일 표시
뷰포트 설정 이해하기
이 설정 한 줄이 빠지면 모바일에서 축소되어 보입니다.
가장 기본이면서 빠뜨리면 치명적인 설정입니다.
01무엇을 하는가
모바일 브라우저에 화면을 어떻게 보여줄지 알려줍니다.
1
화면 폭 지정
기기 화면 크기에 맞춥니다.
2
초기 배율
처음 보이는 확대 비율.
3
축소 방지
전체가 작게 보이는 것을 막습니다.
4
반응형 전제
이것이 있어야 반응형이 동작.
5
한 줄 설정
코드 한 줄이면 됩니다.
6
모든 페이지
전 페이지에 있어야 합니다.
02없으면 생기는 일
데스크톱 화면이 축소되어 보입니다.
글자가 작음
확대해야 읽을 수 있습니다.
버튼 누르기 어려움
너무 작아 정확히 못 누릅니다.
반응형 미작동
설계해도 적용되지 않습니다.
가로 스크롤
옆으로 밀어야 합니다.
검색 불이익
모바일 친화적이지 않다고 판단.
즉시 이탈
방문자가 바로 나갑니다.
03설정 주의
잘못 설정해도 문제가 생깁니다.
확대 차단 금지이용자가 확대할 수 있어야 합니다.
접근성확대를 막으면 시력이 낮은 이용자가 불편.
고정 폭 금지특정 숫자로 고정하지 않습니다.
기기 폭 사용기기 화면에 맞추게 설정.
배율 제한최대 확대를 막지 않습니다.
일관 적용모든 페이지에 동일하게.
04확인 방법
간단히 점검할 수 있습니다.
정상
휴대폰에서 글자가 읽힘 · 확대 없이 이용 가능 · 가로 스크롤 없음 · 확대도 가능
문제
전체가 축소되어 보임 · 확대해야 읽힘 · 옆으로 밀림 · 확대가 안 됨
CHECK POINT
□ 뷰포트 설정이 들어 있는가
□ 모든 페이지에 적용되어 있는가
□ 기기 폭에 맞추도록 설정했는가
□ 이용자 확대를 막지 않았는가
□ 휴대폰에서 확대 없이 읽히는가
□ 가로 스크롤이 생기지 않는가
□ 손가락으로 확대할 수 있는가
□ 검색 도구에서 모바일 오류가 없는가
#뷰포트#화면 설정#모바일 표시#반응형#접근성#확대#기본 설정#반응형#웹비스타#홈페이지 제작