viewport-fit

초안

이 문서는 작성중입니다.

Experimental

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

viewport-fit CSS @viewport 설명자는 문서의 뷰포트가 화면을 채우는 방법을 제어합니다.

Syntax

/* Keyword values */
viewport-fit: auto;
viewport-fit: contain;
viewport-fit: cover;

Values

auto
이 값은 초기 레이아웃 뷰포트에 영향을 미치지 않으며 전체 웹 페이지가 보여집니다.
contain
뷰포트 크기가 디스플레이 내에 새겨진 가장 큰 직사각형에 들어맞게 조정됩니다.
cover
뷰포트 크기가 기기 디스플레이를 모두 채우도록 조정됩니다. 이때 중요한 내용이 디스플레이 바깥 영역으로 밀려나지 않도록 safe area inset 변수를 함께 사용할 것을 권장합니다.

Formal syntax

auto | contain | cover

접근성 문제

viewport-fit 설명자를 사용할 때에는 모든 기기의 디스플레이가 직사각형인 것은 아니므로 safe area inset 변수를 함께 사용해야 함을 기억하세요.

명세

Specification Status Comment
CSS Round Display Level 1
The definition of '"viewport-fit" descriptor' in that specification.
Working Draft Initial definition.

브라우저 호환성

No compatibility data found for css.at-rules.viewport.viewport-fit.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

See also