사이트 내 전체검색
그누보드
아이폰 사파리 뷰포트 메타 태그와 줌 설정
로빈아빠
https://cmd.kr/gnu/506 URL이 복사되었습니다.

본문

아이폰 사파리 뷰포트 메타 태그와 줌 설정

네이버나 다음 모바일 페이지를 보면 가로 모드로 화면을 돌려도 글자가 확대되지 않고 좌우로만 늘어나는 것을 볼 수 있다. 뷰포트 메타 태그(Viewport Meta Tag)에서 화면 비율을 고정하고 확대 축소를 못하게 설정하면 화면을 돌려도 화면이 확대되지 않고 좌우로만 늘어난다. 네이버, 다음만 이런게 아니라 구글을 위시하여 대부분의 모바일 페이지들은 이렇게 확대 축소를 막아놨다.

<meta name="viewport" 
    content="width=device-width, initial-scale=1.0, 
    maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

CSS로 글자가 확대 안하게 지정하면 글자 크기도 고정된다.

p {
    -webkit-text-size-adjust: none;
}

나같이 시력이 안좋은 사용자 입장에서는 원하는 부분을 확대할 수 없어서 불편하다. 구글 리더 같이 많은 양의 글을 읽을 때 불편하게 느낄 수 밖에 없다. 확대 축소를 막는다는 것은 지극히 제공자 입장의 사고 방식이다.

그런데 오늘은 화면을 돌려도 화면에 맞지 않고 글자가 확대 된 상태에서 좌우로 늘어나서 가로 스크롤이 생기는 것이었다. 한사이트만 그런것이 아니고 대부분의 사이트들이 예전처럼 화면 크기 고정이 안되었다. 버그인가 확인하던 도중 내 아이폰만 그렇다는 것을 발견했다. 다른 사람 아이폰에서는 예전 처럼 작동하고 있었다.아이폰 사파리에서 가로모드로 본 네이버 모바일 페이지

이런 저런 설정을 확인하다가 알아낸 것은 접근성 설정의 줌기능을 켜면 뷰포트 메타 태그의 확대 축소 가능 여부 설정(user-scalable)이 무시된다는 것이었다. 화면의 확대 축소가 필요해서 줌기능을 활성화 한 사용자에게는 사이트에서 줌 기능을 막을 수 없다는 것이다.아이폰 접근성 설정 페이지의 줌 설정 화면

접근성 측면에서나 소프트웨어 완성도 측면에서나 이렇게 세세한 기능까지 신경쓰는 것이 애플이다. 이렇게 완성도 높게 사용자를 배려하고 제품을 만들어주는데 애플빠가 안될 수가 없다.


댓글목록

등록된 댓글이 없습니다.

그누보드
190 (2/4P)

Search

Copyright © Cmd 명령어 18.216.154.39