뷰포트는 무엇입니까?
뷰포트는 웹 페이지에 대한 사용자의 표시 영역이다.
뷰포트는 장치에 따라 변화하고, 컴퓨터 화면에 비해 휴대 전화 작게 될 것이다.
정제 및 휴대폰 전에 웹 페이지은 컴퓨터 스크린을위한 설계 및 웹 페이지가 고정 설계 및 고정 된 크기를 갖는 것이 일반적이었다 하였다.
우리는 태블릿과 휴대 전화를 사용하여 인터넷 서핑을 시작했을 때 그런 다음, 고정 된 크기의 웹 페이지는 뷰포트에 맞게 너무 큰했다. 이 문제를 해결하려면, 화면에 맞게 전체 웹 페이지를 축소 이러한 장치의 브라우저.
이 완벽하지 않았다! 하지만 빠른 수정.
뷰포트를 설정
HTML5는 웹 디자이너를 통해 뷰포트를 통해 제어 할 수 있도록하는 방법을 소개 <meta> 태그입니다.
당신은 다음을 포함한다 <meta> 모든 웹 페이지에서 뷰포트 요소를 :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> 뷰포트 요소는 페이지의 크기와 스케일링을 제어하는 방법에 대한 브라우저 지침을 제공합니다.
width=device-width 부분 (장치에 따라 달라집니다) 장치의 화면 폭을 따라 페이지의 폭을 설정합니다.
initial-scale=1.0 부분은 페이지가 처음 브라우저에 의해로드 된 초기 줌 레벨을 설정합니다.
여기 뷰포트 메타 태그없이 웹 페이지, 뷰포트 메타 태그와 같은 웹 페이지의 예입니다 :
팁 : 전화 또는 태블릿이 페이지를 탐색하는 경우의 차이를 확인하려면이 링크를 클릭 할 수 있습니다.
뷰포트의 크기 내용
사용자는 데스크톱 및 모바일 장치 모두에서 수직으로 웹 사이트를 이동하는 데 사용됩니다 -하지만 수평!
사용자가 가로로 스크롤, 확대 또는 축소 강제로한다면, 그것은 가난한 사용자 경험 결과 전체 웹 페이지를 볼 수 있습니다.
일부 추가 규칙을 따라야합니다 :
1. 큰 고정 폭 요소를 사용하지 마십시오 - 예를 들어, 이미지가 뷰포트가 가로로 스크롤 될 수 있습니다 뷰포트보다 넓은 폭에서 표시되는 경우. 뷰포트의 폭에 맞게 콘텐츠를 조정해야합니다.
CSS 픽셀의 화면 크기와 폭이 장치 사이에서 매우 다양하기 때문에, 내용이 잘 렌더링하기 위해 특정 뷰포트의 폭에 의존해서는 안 - 2. 내용이 잘 렌더링하는 특정 뷰포트의 폭에 의존하게하지 마십시오.
페이지 요소에 큰 절대 CSS의 폭을 설정 요소가 더 작은 장치에서 뷰포트 너무 넓게 원인이됩니다 - 3. CSS 미디어 쿼리는 크고 작은 화면에 대해 서로 다른 스타일을 적용합니다. 100 % 대신, 같은 폭 상대 폭 값을 사용하는 것이 좋습니다. 또한, 대형 절대 위치 값을 사용하여 조심. 이 요소가 소형 장치에서 뷰포트 외부 떨어질 수 있습니다.