뷰포트 예제

뷰포트란? 브라우저의 뷰포트는 콘텐츠가 사용자에게 표시되는 웹 페이지의 영역입니다. 뷰포트의 크기가 같지 않으며 웹 사이트가 표시되는 장치의 화면 크기 변화에 따라 다릅니다. 노트북의 경우 뷰포트의 크기가 스마트폰이나 태블릿에 비해 더 큽니다. 예제 응용 프로그램의 프로젝트 구조는 다음과 같습니다: 별도 URLS는 더 많은 개발 리소스를 요구하며 완전히 새로운 사이트를 빌드하고 www.m.example.com 같은 하위 도메인에서 호스트해야 합니다. 검색 엔진이 별도의 모바일 URL을 이해하도록 하려면 데스크톱 www.example.com 및 모바일 www.m.example.com 기기모두에 주석을 만들어야 합니다. 초기 또는 최대 축척을 설정한 페이지의 경우 너비 속성이 실제로 최소 뷰포트 너비로 변환된다는 의미입니다. 예를 들어 레이아웃에 너비가 500픽셀 이상 필요한 경우 다음 태그를 사용할 수 있습니다. 화면폭이 500픽셀 이상이면 브라우저가 화면에 맞게 뷰포트(확대하지 않고)를 확장합니다. 그들 중 일부는 필요한 반면 다른 사람은 당신의 자신의 선택의 도구로 대체 될 수 있습니다.

좁은 화면 장치(예: 모바일)는 일반적으로 화면보다 넓은 가상 창 이나 뷰포트에서 페이지를 렌더링한 다음 렌더링된 결과를 축소하여 한 번에 모두 볼 수 있도록 합니다. 그런 다음 사용자가 이동 및 확대/축소하여 페이지의 다른 영역을 볼 수 있습니다. 예를 들어 모바일 화면의 너비가 640px인 경우 페이지는 980px의 가상 뷰포트로 렌더링될 수 있으며 640px 공간에 맞게 축소됩니다. 페이지의 뷰포트를 설정한 후 다음 단계는 페이지의 콘텐츠 크기를 조정하는 것입니다. 사용자의 디스플레이에 따라 콘텐츠를 조정한 모바일 친화적인 뷰포트의 예: 메타 뷰포트 태그가 있는 모바일 사이트를 개발할 때 지정된 뷰포트에 맞지 않는 페이지 콘텐츠를 실수로 쉽게 만들 수 있습니다. 예를 들어 뷰포트보다 너비가 넓은 이미지로 인해 뷰포트가 가로로 스크롤될 수 있습니다. 사용자가 가로로 스크롤할 필요가 없도록 이 콘텐츠를 뷰포트 너비에 맞게 조정해야 합니다. 뷰포트 메타 설정의 유용한 예와 지금까지 발생하고 필요한 정보의 모든 유용한 예입니다. 이전 예제에서 사용자는 콘텐츠와의 1:1 관계를 초과하여 축소할 수 없으며 3:1 관계만큼만 확대할 수 있습니다. 위의 블로그 게시물 예제를 자세히 살펴보겠습니다. 작은 화면에서 1em의 Roboto 글꼴은 줄당 10 단어를 완벽하게 제공하지만 큰 화면은 중단점이 필요합니다.

이 경우 브라우저 너비가 575px보다 크면 이상적인 콘텐츠 너비는 550px입니다. 모바일 페이지(http://m.example.com/page-1)에서 필요한 어노멘션이 있어야 합니다: CSS 픽셀의 화면 크기와 너비는 장치(예: 휴대폰과 태블릿, 심지어 다른 휴대폰 간에)마다 크게 다르기 때문에 콘텐츠는 잘 렌더링하려면 특정 뷰포트 너비에 의존합니다. 최소 및 최대 배율을 설정할 수도 있습니다. 최소는 사용자가 너무 멀리 확대하는 것을 방지하고 최대값은 너무 멀리 확대하는 것을 방지합니다. 다음은 초기 규모와 함께 최소의 예입니다: 이것은 HTML5 뷰포트 메타 태그에이 게시물을 마무리. 우리는 세 가지 화면 크기에 위의 화면 잡아에서 볼 수 있듯이, 결과는 Viewport 메타 태그의 사용으로 매우 극적이다. 전반적으로 메타 태그를 사용하면 다양한 화면 크기를 가진 장치에서 훨씬 더 나은 환경을 제공 할 수 있습니다.

Comments are closed.