Chrome M40에서는 뷰포트가 매우 미묘하게 변경되었지만 사용자에게는 큰 차이가 있습니다.
모바일 브라우저가 처음 시작되었을 때는 뷰포트 메타 태그가 없으므로 웹페이지가 화면 공간이 약 980px라고 생각하고 이 크기로 렌더링했습니다. 개발자는 표시 영역 메타 태그를 사용하여 너비를 정의할 수 있으며, 가장 일반적인 너비는 화면 크기를 기기의 크기로 설정하는 '기기 너비'입니다. 웹 기초에서 자세히 알아보세요.
릭 바이어스가 가상 뷰포트를 설명하는 방식은 다음과 같습니다. 가상 뷰포트의 개념은 '뷰포트'라는 개념을 '레이아웃 뷰포트' (고정된 위치 항목이 연결된 위치)와 '시각적 뷰포트' (사용자가 실제로 보는 위치)라는 두 가지로 나누는 것입니다.
매우 간단한 예
웹사이트 videojs.com은 앱 바가 상단에 고정되어 있고 앱 바의 왼쪽과 오른쪽에 모두 링크가 있으므로 좋은 예입니다.
아래 이미지는 사이트를 확대하고 좌우로 화면 이동을 시도할 때 표시되는 모습을 보여줍니다.
상단 기기는 가상 뷰포트가 없는 Chrome M39이고 하단 3개는 가상 뷰포트가 있는 Chrome M40입니다.
Chrome M39에서는 확대한 후 앱 바가 표시되지만 오른쪽으로 스크롤해도 바 오른쪽에 있는 링크를 볼 수 없으며 로고만 표시됩니다.
이를 '가상 뷰포트'가 있는 Chrome M40과 비교해 보면 '시각적 뷰포트'가 '레이아웃 뷰포트' 내의 모든 항목을 스크롤하여 오른쪽의 링크를 볼 수 있습니다.
Internet Explorer에는 이미 이러한 동작이 있으며 이번 변경사항을 통해 Chrome이 Internet Explorer와 더 유사해집니다.
html
이로 인해 개발자에게 영향을 미치는 유일한 주요 변경사항은 M39에서는 html 요소에 overflow: hidden을 적용해도 페이지가 계속 스크롤되었지만 M40에서는 더 이상 지원되지 않으므로 페이지가 스크롤되지 않는다는 점입니다.
더 확실한 정보
자세히 알아보고 싶으신가요?
그러면 아래 슬라이드 자료를 확인하실 수 있습니다.