세 번 째 viewport - ideal viewport

원문:http://www.quirksmode.org/mobile/metaviewport/#t10
세 번 째 viewport
몇 년 전에 모 바 일 브 라 우 저 는 두 가지 viewport 가 있다 고 언급 했 습 니 다. visual viewport 는 layot viewport 입 니 다.필요 하 다 면 이 몇 편의 문장 을 다시 읽 어도 된다.글 은 이 두 view port 의 지식 을 모두 가 이미 파악 했다 고 가정 합 니 다.
ideal viewport
그 결과 세 번 째 viewport 가 존재 한 다 는 것 을 알 수 있 습 니 다. 저 는 그 를 ideal viewport 라 고 부 릅 니 다.이 viewport 는 장치 의 페이지 를 가장 이상 적 인 크기 로 설정 할 수 있 습 니 다.따라서 각 장치 의 ideal viewport 사 이 즈 는 다르다.
오래된 저렴 한 retina 화면 이 없 는 기종 에 서 는 ideal viewport 가 물리 적 픽 셀 과 일치 하지만 꼭 필요 한 것 은 아 닙 니 다.물리 적 픽 셀 이 더 높 은 장 치 를 업데이트 하여 오래된 ideal viewport 를 유지 합 니 다. 이것 은 장치 에 가장 이상 적 이 고 적합 하기 때 문 입 니 다.
아이 폰 4s 까지 retina 화면 이 있 든 없 든 그의 ideal viewport 는 320 x480 이다.320 x480 은 이런 아이 폰 의 페이지 에서 가장 이상 적 이기 때문이다.
idealviewport 에 관 한 가장 중요 한 두 가지 내용:

layot view port 는 ideal view port 로 설정 할 수 있 습 니 다.width=device-width initial-scale=1 지령 은 할 수 있다.

모든 scale 명령 은 ideal viewport 에 대한 것 이다.layot viewport 가 얼마나 설정 되 어 있 는 지 무시 하기 때문에 maximum-scale=3 가장 큰 크기 는 ideal viewport 의 300%

를 의미 합 니 다.
이상 적 인 뷰 포트 찾기
ideal viewport 의 값 을 읽 는 것 은 어떤 경우 에 유용 합 니 다.네, 읽 을 수 있 습 니 다.페이지 에 다음 과 같이 표 시 된 meta 탭 을 설정 한 다음 document.documentElement.clientWidth 을 사용 하여 현재 장치 의 ideal viewport 를 읽 습 니 다.

만약 위의 이 방법 을 선택 하지 못 해서 ideal viewport 의 값 을 읽 을 수 없다 면 screen.width 도움 이 되 기 를 바 랍 니 다. 하지만 BlackBerry 만 이 정확 한 정 보 를 제공 할 수 있 습 니 다.다른 브 라 우 저 는 서로 다른 쓸모없는 정 보 를 얻 을 수 있다.
열 린 문제: screen.width ideal viewport 의 값 을 가 져 야 합 니까? 찬성: 이 속성 은 적어도 유용 한 정보 반 대 를 가 져 야 합 니 다: ideal viewport 는 물리 적 픽 셀 과 마찬가지 로 쓸모 가 없습니다.
layout viewport
페이지 를 표시 하기 전에 브 라 우 저 는 layot viewpoint 의 너비 가 얼마 인지 알 아야 합 니 다.이 viewport 의 값 은 css 성명 에 비해 계 산 됩 니 다. 예 를 들 어 width：20%명령 이 없 는 상태 에서 모 바 일 브 라 우 저 는 기본 값 을 선택 합 니 다. 대부분 980 px 입 니 다.이것 은 옳 고 그 름 과 상 관 없 이 브 라 우 저 공급 업 체 의 선택 일 뿐이다.
meta viewport 탭 에 width = 400 또는 다른 모든 수 치 를 설정 하면 layot viewport 는 이 값 으로 설 정 됩 니 다. 우 리 는 이미 알 고 있 습 니 다.
그러나 Android WebKit 's and IE 의 최소 layot viewport 는 320 px 로 설정 한 값 이 320 보다 적 으 면 자동 으로 ideal viewport 의 값 으로 변 합 니 다.
layot viewport 가 ideal viewport 와 같은 값 으로 설정 되 어 있 습 니 다 width=device-width or initial-scale=1.이것 은 복잡 한 것 입 니 다. safari 와 i10 에 bugs 가 있 기 때문에 사용 inittial-scale 도 함정 이 있 지만 이것 은 일반적인 규칙 입 니 다.
최소
가장 큰 layot view port 의 너 비 는 10000 픽 셀 입 니 다. 저 는 이 숫자 를 믿 지 않 습 니 다. 브 라 우 저가 이 수치 로 축소 하 는 것 을 허락 하지 않 기 때문에 지금까지 저 는 이 공식 숫자 를 받 아 들 였 습 니 다.
최소 layot view port 의 값 은 약 1 / 10 의 ideal view port 이 며, 이것 도 최대 크기 조정 등급 입 니 다.(layot viewport 는 최소 visual viewport 보다 작 아 지지 않 습 니 다) 예외: Android WebKit and IE 최소 layot viewport 는 320 px 보다 작 지 않 습 니 다.
크기 조정
줌 크기 조정 은 교활 합 니 다.이론 적 으로 듣 기 에는 매우 간단 하 다. 사용자 의 크기 를 결정 하 는 크기 조정 요 소 는 두 가지 측면 을 포함한다.

크기 조정 요 소 를 직접 읽 을 수 없습니다. 대신 크기 조정 요소 와 연 결 된 visual viewport 의 폭 을 읽 어야 합 니 다.그래서 가장 작은 크기 조정 요 소 는 가장 큰 visual view port 의 폭 을 결정 하고 반대로 도 마찬가지 입 니 다.

결과 에 따 르 면 모든 크기 조정 요 소 는 ideal viewport 에 비해 현재 layot viewport 의 값 이 얼마 든 간 에.

그 다음 에 이름 에 대한 토론 이다. 애플 의 언어 로 볼 때 zoom 은 scale 이다. meta viewport 와 같은 명령 initial-scale, minimum-scale, and maximum-scale 은 다른 브 라 우 저 업 체 들 이 아이 폰 과 호 환 된 페이지 에 대한 호환성 을 유지 하기 위해 따라 야 한다.
이 세 가지 명령 은 크기 조정 요 소 를 예시 합 니 다. initial - scale = 2 는 200% 의 ideal viewport 폭 으로 크기 조정 하 는 것 을 의미 합 니 다.
공식.
먼저 공식 을 정의 합 시다.

visual viewport width = ideal viewport width / zoom factor
zoom factor = ideal viewport width / visual viewport width

따라서 ideal viewport 는 320 px 에 크기 2 를 설정 하면 160 px 의 visual viewport 를 얻 을 수 있 습 니 다.layot view port 의 폭 은 계산 에 참여 하지 않 습 니 다.
최소, 최대 크기 조정 요소
브 라 우 저가 지원 하 는 최소 와 최대 크기 조정 요 소 는 얼마 입 니까?
우선, visual view port 는 layot view port 보다 넓 지 않 기 때문에 대부분의 경우 가장 큰 크기 조정 요 소 는 ideal viewport width / layout viewport width 입 니 다.
initial-scale
initial - scale 명령 을 설정 하여 실제로 두 가지 일 을 했 습 니 다.

페이지 의 초기 크기 조정 요 소 를 의미 있 는 값 으로 설정 하 였 으 며, ideal viewport 에 비해 계산 하여 visual viewport 의 폭 을 만 들 었 습 니 다.

방금 계 산 된 visual view port 의 너비 값 에 따라 layot view port 의 너비 값 을 설정 합 니 다.

세로 화면 에 있 는 아이 폰 (번역자: 4s) 을 보 여 줍 니 다. 우 리 는 initial-scale=2 을 설정 하고 다른 명령 을 설정 하지 않 습 니 다.이 명령 은 visual view port 의 폭 을 160 px (320 / 2) 로 설정 하여 놀 라 지 않 을 것 입 니 다.이것 이 바로 축소 명령 작업 방식 이다.
그러나 이 명령 은 layot viewport 의 폭 을 160 px 로 설정 하기 때문에 크기 조정 값 이 가장 작은 상태 에서 160 px 너비 의 페이지 가 있 습 니 다.(visual view port 는 layot view port 보다 더 크게 변 하지 않 기 때문에 더 이상 축소 할 수 없습니다)
하지만 의미 가 없다. 내 의견 을 물 어보 면 전혀 의미 가 없다 고 말 할 수도 있다.그러나 브 라 우 저의 행동 이 그렇다 는 것 은 의심의 여지 가 없다.
브 라 우 저 버그
안 드 로 이 드 에 대해 뚜렷 한 것 은 안 드 로 이 드 가 그 값 이 1 인 상황 에서 initial-scale layot view port 의 폭 을 설정 할 수 있 도록 허용 한 것 이다.또한 width 의 값 을 설정 할 수 없습니다.그래서 다른 명령 이 없 는 상태 에서 만 initial-scale=1 의 설정 이 작 동 합 니 다.
IE 에 대해 서 는 잘못된 ideal view port (320 x 320 과 320 x 480 이 아 닌) 를 제공 하 였 으 며, IE 는 모든 initial - scale 의 값 이 1 인 척 하 였 으 며, IE 에 있어 서 initial - scale 의 값 을 설정 하 는 것 은 소 용이 없 었 다.
지령 의 혼동initial-scale layot view port 의 폭 을 설정 할 수 있 기 때문에 논란 이 되 는 명령 을 만 들 수 있 습 니 다.

지금 무슨 일이 일어 날 까요?브 라 우 저 는 혼 란 스 러 운 명령 을 받 았 습 니 다. 우 리 는 다시 4s 로 돌아 갑 니 다.

initial-scale=1 브 라 우 저 에 layot view port 의 폭 을 320 px

로 설정 하 라 고 알려 줍 니 다.

width=400 브 라 우 저 에 layot view port 의 너비 가 400 px

라 고 알려 줍 니 다.
문장 번역!경험 에 한계 가 있 으 니 조심 하 세 요!