맞춤 축소 뷰포트 메타 속성의 기능은 무엇입니까?
답변:
사파리 9.0에 소개 된 것은 글을 쓰는 시점에서 사파리 전용입니다. "Safari의 새로운 기능"에서 Safari 9.0에 대한 설명서 :
뷰포트 변경
뷰포트 메타 태그를 사용
"width=device-width"하면 페이지가 뷰포트 경계를 오버플로하는 내용에 맞게 축소됩니다."shrink-to-fit=no"아래와 같이 메타 태그를 추가하여이 동작을 무시할 수 있습니다 . 추가 된 값은 페이지가 뷰포트에 맞게 크기가 조정되지 않도록합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
요컨대, 이것을 뷰포트 메타 태그에 추가하면 사파리 9.0 이전의 동작을 복원합니다.
예
다음은 두 가지 구성으로 페이지를로드 할 때의 차이점을 보여주는 시각적 예제입니다.
빨간색 섹션은 뷰포트의 너비이며 파란색 섹션은 초기 뷰포트 외부에 배치됩니다 (예 :) left: 100vw. 첫 번째 예제에서 페이지가 shrink-to-fit=no생략 될 때 (보기에 맞지 않는 내용 을 표시하는 경우 ) 페이지가 확대되고 후자의 예제에서 파란색 내용이 화면에서 벗어나는 방법에 유의하십시오 .
이 예제의 코드는 https://codepen.io/davidjb/pen/ENGqpv 에서 찾을 수 있습니다 .
맞춤 수축이 지정되지 않은 경우
수축률 = 아니오
shrink-to-fit=no하면이 동작이 방지되어 확대 / 축소 수준 만 남겨두고 넘친 콘텐츠를 화면에 표시하지 않습니다. iDevice (또는 iOS 시뮬레이터)에서 Codepen 예제를 시도하고 설정을 변경하십시오. 대화식으로 변경 사항을 보는 것이 도움이 될 것입니다.
shrink-to-fit행동. 을 사용 shrink-to-fit=no하면 페이지가 예상 크기로 유지되어 컨텐츠가 뷰포트를 오버플로 할 수 있습니다. 사용자는 여전히 오버플로 컨텐츠를보기 위해 여전히 스크롤하거나 축소 할 수 있지만 초기 뷰포트는 장치 크기와 일치합니다.
iOS 사용량에 대한 통계로 iOS 9.0-9.2.x 사용량이 현재 0.17 %임을 나타냅니다. 이 수치가 이러한 버전의 전 세계 사용을 나타내면 뷰포트 메타 태그에서 맞춤 축소를 제거하는 것이 훨씬 안전합니다.
9.2.x 이후 iOS는 브라우저에서이 태그 확인을 제거합니다.
이 페이지를 확인할 수 있습니다 https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html