반응 이 빠른 웹 디자인 - 뷰포트

뷰포트 란 무엇입니까?

뷰포트는 웹 페이지의 사용자가 볼 수있는 영역입니다.

뷰포트는 장치에 따라 다르며 휴대 전화에서는 컴퓨터 화면보다 작습니다.

태블릿과 휴대 전화를 사용하기 전에 웹 페이지는 컴퓨터 화면 용으로 만 설계되었으며 웹 페이지는 정적 인 디자인과 고정 크기가 일반적이었습니다.

그런 다음 태블릿과 휴대 전화를 사용하여 인터넷 서핑을 시작했을 때 고정 크기 웹 페이지가 너무 커서 뷰포트에 맞지 않았습니다. 이를 해결하기 위해 해당 장치의 브라우저는 전체 웹 페이지를 화면에 맞게 축소했습니다.

이것은 완벽하지 않았습니다 !! 그러나 빠른 수정.

뷰포트 설정하기

HTML5는 웹 디자이너가 <meta>태그를 통해 뷰포트를 제어 할 수있게하는 메소드를 도입했습니다 .

<meta>모든 웹 페이지에 다음과 같은 뷰포트 요소를 포함해야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta>뷰포트 요소는 페이지의 크기와 스케일링을 제어하는 방법에 브라우저 지침을 제공합니다.

이 width=device-width부분은 장치의 화면 너비를 따르도록 페이지 폭을 설정합니다 (장치에 따라 다름).

이 initial-scale=1.0파트는 페이지가 브라우저에 의해 처음로드 될 때 초기 확대 / 축소 레벨을 설정합니다.

다음은 뷰포트 메타 태그가 없는 웹 페이지 와 뷰포트 메타 태그가 있는 동일한 웹 페이지의 예 입니다 .

도움말 : 휴대 전화 또는 태블릿으로이 페이지를 탐색하는 경우 아래의 두 링크를 클릭하여 차이점을 확인할 수 있습니다.

 

뷰포트에 내용 크기 맞추기

사용자는 데스크톱과 휴대 기기에서 세로로 웹 사이트를 스크롤하는 데 사용되지만 가로로 스크롤하지는 않습니다!

따라서 사용자가 가로로 스크롤하거나 축소하여 전체 웹 페이지를 보게되면 사용자 환경이 좋지 않게됩니다.

따라야 할 몇 가지 추가 규칙 :

1. 큰 고정 폭 요소를 사용하지 마십시오. 예를 들어, 이미지가 뷰포트 너비보다 넓게 표시되면 뷰포트가 가로로 스크롤 할 수 있습니다. 이 내용을 뷰포트 너비에 맞게 조정해야합니다.

2. 특정 뷰포트 너비에 의존하여 내용을 렌더링하지 마십시오 . CSS 픽셀의 화면 크기와 너비가 장치마다 다양하기 때문에 내용을 렌더링 할 때 특정 뷰포트 너비에 의존해서는 안됩니다.

3. CSS 미디어 쿼리를 사용하여 작고 큰 화면에 다른 스타일을 적용합니다. - 페이지 요소에 대해 절대적인 CSS 너비를 크게 설정하면 요소가 작은 장치의 뷰포트에 비해 너무 넓어집니다. 대신 width : 100 %와 같은 상대 너비 값을 사용하는 것을 고려하십시오. 또한 절대 위치 지정 값을 크게 사용하지 않도록주의하십시오. 작은 요소에서 요소가 뷰포트 외부로 떨어질 수 있습니다.