Latest web development tutorials

반응 형 웹 디자인 - 뷰포트

뷰포트는 무엇인가?

뷰포트 사용자 페이지를 볼 수있는 영역.

뷰포트 중국어 호출로 번역 될 수있다 "뷰포트."

이 것 (모바일 브라우저 (뷰포트) 일반적으로이 가상 "창"화면보다 넓은 (뷰포트) 가상 "창"의 페이지입니다, 그래서 당신은 모든 페이지에게 작은 창을 짜낼 필요가 없습니다 모바일 브라우저 페이지에 최적화 손상 레이아웃), 사용자가 이동하지 않고 페이지의 다른 부분을 확대 볼 수있다.


설정 뷰포트

다음과 같이 일반적인 모바일에 최적화 된 웹 페이지에 대한 뷰포트 메타 태그는 다음과 같습니다


  • 폭 : 뷰포트의 크기를 제어하는 ​​값 (600) 경우, 지정 또는 단말기 폭의 장치 폭 특수 값 (픽셀 CSS에서의 시간을 100 %로 조정) 할 수있다.
  • 높이 : 지정된 폭과 높이와 대응한다.
  • 초기 규모 :은 초기 규모, 때 첫 번째 페이지로드 시간 규모.
  • 최대 규모 : 사용자가 최대 비율을 확대 할 수 있습니다.
  • 최소 규모 : 사용자가 최소 규모를 확장 할 수 있습니다.
  • 사용자 확장 성 : 사용자가 수동으로 확대 할 수 있는지 여부.

다음의 예는 뷰포트가 아닌 모바일 부작용에를 사용하여 뷰포트를 사용하는 방법을 보여줍니다 :

예 1 뷰포트를 첨가하지 않은 : 보려면 클릭하세요

예 2, 뷰포트를 추가 보려면 클릭하세요

당신이 태블릿 또는 전화로 방문하는 경우, 당신은 효과를보기 위해 클릭 할 수 있습니다.