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