웹 개발의 뷰포트viewport 이동

CSS 표준 문서에서 뷰포트 viewport는 초기 포함 블록이라고 합니다.이 초기 포함 블록은 모든 CSS 퍼센트 너비 추산의 근원으로 CSS 레이아웃에 최대 너비를 제한합니다.바탕 화면에서 뷰포트의 폭은 브라우저 창의 폭과 일치합니다.이동단에서 뷰포트는 배치 뷰포트(layout viewport), 비주얼 뷰포트(visual viewport), 이상 뷰포트(ideal viewport)로 나뉜다.
 
배치 뷰포트
이동단 장치의 문제는 뷰포트의 폭을 브라우저 창의 폭과 같이 하면 추악한 결과를 초래할 수 있다는 것이다.모바일 브라우저의 일반적인 폭은 240에서 640픽셀이며, 대부분의 데스크톱에 디자인된 사이트의 폭은 적어도 800px이다.그래서 사이트 내용이 핸드폰에서 굉장히 좁아 보일 수 있어요.
//아래 그림은 시나닷컴이 휴대전화에 표시된 상태인데 축소 조작을 하지 않으면 문자가 거의 보이지 않는다
휴대전화에서 뷰포트와 모바일 브라우저의 화면 폭은 더 이상 연결되지 않고 완전히 독립된다.배치 뷰포트라고 합니다. CSS 배치는 이를 기준으로 계산되고 구속됩니다.
데스크톱 브라우저로 디자인된 사이트를 수용하기 위해 모바일 기기의 기본 배치 뷰포트 폭은 화면의 폭보다 훨씬 크다. 980px 또는 1024px(다른 값일 수도 있고 이것은 장치 스스로 결정할 수도 있다)로 설정했지만 그 결과 브라우저에 가로 스크롤 바가 나타난다.브라우저의 보기 영역의 폭은 기본적인viewport의 폭보다 작기 때문입니다.다음 그림은 일부 장치의 브라우저의 기본viewport 폭을 보여 줍니다
　　document.documentElement.clientWidth/Height는 배치 뷰포트의 치수를 반환합니다.
비주얼 뷰포트
독립적으로 뷰포트를 배치하는 창조는 데스크톱 사이트가 휴대전화로 이동하는 데 큰 도움을 주었지만 모바일 기기의 화면 크기를 완전히 무시할 수는 없다.일부 CSS 선언은 CSS의 초기 포함 블록과 관계없이 사용자가 본 것과 관련이 있습니다.그리고 때때로 사용자가 사이트의 어떤 부분을 보았는지 알면 웹 개발자에게 도움이 될 수 있다
시각 뷰포트는 사용자가 보고 있는 사이트의 구역이고 자바스크립트 속성은 window입니다.innerWidth/Height
[주의] 안드로이드 웹키트2와 프록시 브라우저의 호환성에 문제가 있습니다.
줌은 비주얼 뷰포트의 크기에 영향을 줍니다.확대/축소 정도가 100%인 경우 비주얼 뷰포트는 장치 화면만큼 넓습니다.확대는 화면에 표시되는 CSS 픽셀을 더 작게 만들고, 축소는 화면에 표시되는 CSS 픽셀이 더 많기 때문에 뷰포트를 더 작게 만듭니다.따라서 축척 정도와 시각 뷰포트의 크기는 역관계이다. 크게 놓을수록 시각 뷰포트는 작아진다.
아이폰5의 경우 브라우저 배치 뷰포트의 폭은 기본적으로 1024px이고 화면 폭은 640개의 장치 픽셀, DPR은 2이기 때문에 CSS 픽셀은 320px이다.현재 사용자는 100%에서 200%로 확대되었고, 화면에 160개의 CSS 픽셀만 있을 때까지 CSS 픽셀이 확대되었습니다.그러나 배치 뷰포트는 1024px로 유지되므로 페이지의 요소는 크기를 변경하지 않습니다.
[참고] 사용자가 배율을 조정할 때 뷰포트 크기만 변경되고 배치 뷰포트는 변경되지 않습니다.이동단의 배율은 CSS 레이아웃을 다시 계산하지 않습니다.휴대전화에서 자주 축소가 발생하고, 휴대전화의 프로세서가 매우 느리게 작동하며, 배터리의 소모가 매우 빠르기 때문에, 다시 배치하지 않는 것은 성능에 매우 큰 이점이 있다
//다음 코드는 3초 후 페이지의 확대/축소율이 100%에서 200%로

test.innerHTML = '    :' + screen.width + '<br>    :' + window.innerWidth;
setTimeout(function(){    var meta = document.getElementsByTagName('meta')[1];
    meta.setAttribute('content','initial-scale=2');
    test.innerHTML = '    :' + screen.width + '<br>    :' + window.innerWidth;
},3000);

이상적인 뷰포트
기본적으로 휴대전화나 태블릿 브라우저의 레이아웃 폭은 980이나 1024픽셀이다.비록 이것은 데스크톱 사이트를 납작하게 만들 수 있지만, 이것은 결코 이상적이지 않다. 특히 휴대전화 사용자에게는 좁은 스크린에서 좁은 사이트에 더욱 적합하기 때문이다
즉, 배치 뷰포트의 기본 너비는 이상적인 너비가 아닙니다.애플과 다른 애플을 본받은 브라우저 업체들이 이상적인 뷰포트를 도입하는 이유다.이것은 장치에 있어서 가장 이상적인 배치 뷰포트 크기입니다.이상적인 뷰포트에 표시되는 사이트는 가장 이상적인 조회와 읽기 폭을 가지고 있으며, 사용자가 페이지에 처음 들어갈 때도 축소할 필요가 없다
사이트가 휴대전화를 위한 준비일 때만 이상적인 뷰포트를 사용해야 한다.이상적인 뷰포트는 페이지에 meta 뷰포트 라벨을 능동적으로 추가할 때만 적용됩니다.meta 뷰포트 레이블 선언이 없는 경우 배치 뷰포트는 기본 너비를 유지하며 이상적인 뷰포트는 명시적으로 사용할 때만 영향을 미칩니다.

//          ，                   

이상적인 뷰포트를 정의하는 것은 장치나 운영 체제가 아닌 브라우저의 작업입니다.따라서 같은 장치의 다른 브라우저는 서로 다른 이상적인 뷰포트를 가지고 있다.예를 들어 삼성 갤럭시 포켓의 안드로이드 웹키트의 이상적인 뷰포트는 320*427px이고 Opera mobile12는 240*320px이다.그러나 브라우저의 이상적인 뷰포트 크기는 브라우저가 있는 장치에 따라 달라집니다.삼성 갤럭시 s4의 크롬의 이상적인 뷰포트는 360*640px이지만, 넥서스 7에서는 601*962px이다.이유는 명백하다:Nexus7은 평면으로 화면이 더 넓기 때문에 이상적인 뷰포트도 더 넓어야 한다
　　screen.width/height 반환은 이상적인 뷰포트의 크기입니다
[주의] 장치 방향이 바뀔 때 아이폰의 이상적인 뷰포트 화면width/height의 값은 바뀌지 않지만 안드로이드 장치는 바뀔 수 있습니다.배치 뷰포트 문서documentElement.clientWidth 및 뷰포트 window.innerWidth의 값, 애플과 안드로이드 모두 바뀐다
meta 뷰포트
meta 뷰포트 라벨이 존재하는 주요 목적은 배치 뷰포트의 사이즈와 이상적인 뷰포트의 사이즈를 일치시키는 것이다.그것은 앱이 발명했고, 다른 휴대전화와 태블릿PC는 대부분의 내용을 복제했다.데스크톱 브라우저는 이상적인 뷰포트 개념이 없기 때문에 지원하거나 필요하지 않습니다.IE는 예외입니다: 휴대전화에서는 메타 뷰포트 라벨을 지원하지만 @-ms-viewport를 사용하는 것이 좋습니다
meta 뷰포트 레이블은 HTML 문서에 배치되고 다음 형식으로 작성되어야 합니다.

모든 이름/값 쌍은 브라우저에 번호를 보내는 명령입니다.그것들은 쉼표로 구분되어 모두 6개가 있다
1. width: 배치 뷰포트의 폭을 특정한 값으로 설정합니다. 2, init-scale: 페이지의 초기 축소 정도와 배치 뷰포트의 폭을 설정합니다. 3, minimum-scale: 최소 축소 정도(사용자가 축소할 수 있는 정도)를 설정합니다. 4,maxmum-scale: 최대 축소 정도(사용자가 확대할 수 있는 정도)를 설정합니다. 5,사용자-scalabel: 사용자의 축소 6,height 차단 여부: 배치 뷰포트의 높이 설정 (실행되지 않음)
width
【0】폭을 설정하지 않음
예를 들어 아이폰4S가viewport를 설정하지 않으면 화면을 980px로 나누는 것처럼 기본적으로 980px를 사용합니다.만약 원소를 100px*100px로 설정하면 화면의 100/980으로 보입니다
【1】배치 뷰포트의 크기를 이상적인 값으로 설정합니다.

만약 아이폰4S가viewport width=device-width를 설정한다면 그는 화면을 320px로 나누는 것처럼 320px가 될 것이다.만약 원소를 100px*100px로 설정하면 화면의 100/320으로 보입니다
【2】배치 뷰포트의 크기를 고정 너비로 설정합니다.

브라우저가 지원하는 최대 값은 10000개의 픽셀이며, 최소 값은 이상적인 뷰포트의 20%입니다. 안드로이드 웹키트는 배치 뷰포트보다 작은 폭을 허용하지 않습니다.이러한 값을 지정하면 일반적으로 980px인 기본 배치 뷰포트로 자동 변환됩니다.IE10은 480px를 초과하는 값을 허용하지 않습니다. 초과하면 자동으로 배치 뷰포트의 기본 너비 1024px로 변환됩니다
initial-scale
initial-scale 명령은 페이지의 초기 축소 정도를 설정합니다.1은 100%, 2는 200%를 의미한다.축척 정도는 이상적인 뷰포트에 따라 계산됩니다.

      =         /       

[주의] 안드로이드가 자체로 가지고 있는 웹키 브라우저는 initial-scale = 1 및 width 속성을 설정하지 않았을 때만 정상적으로 나타납니다
줌 정도는 비주얼 뷰포트의 너비와 역연관되며, 줌 정도가 높을수록 비주얼 뷰포트가 작다는 의미입니다.그래서 initial-scale=1시 시각적 뷰포트 사이즈는 이상적인 뷰포트 사이즈와 같다.initial-scale=2는 200%로 확대되기 때문에 시각 뷰포트의 높이는 이상 뷰포트의 절반이다
[기본값]
안드로이드 장치의 initial-scale는 기본값이 없습니다. 아이폰과 아이패드에서viewport가 설정한 폭이 얼마든지 상관없이 기본값이 지정되지 않으면 아이폰과 아이패드는 자동으로 이 축소값을 계산하여 현재 페이지에 가로 스크롤 바가 나타나지 않도록 합니다. (또는viewport의 폭이 화면의 폭입니다)
【1】width=device-width,initial-scale=1
IE10에서 initial-scale가 1일 때 가로 화면 모드에서 320px의 폭을 유지하지만 width=device-width일 때 320px에서 480px로 변경합니다
그래서 모든 브라우저에서 이 문제를 해결하기 위해서는

【2】width=400,initial-scale=1

배치 뷰포트의 너비를 400px로 설정한 다음 이상적인 뷰포트의 너비로 설정합니다.결과적으로 브라우저는 각 방향에서 가장 큰 치수를 선택했습니다.따라서 초기의 아이폰 휴대전화는 세로 화면 모드에서의 배치 뷰포트 폭은 400px(320px와 400px 중 비교적 큰 값), 가로 화면 모드에서는 480px(480px와 400px 중 비교적 큰 값)이었다.
따라서 배치 뷰포트에 최소 너비를 설정하고 장치 및 방향에 필요한 경우 브라우저가 배치 뷰포트를 더 넓게 설정할 수 있습니다.
minimum-scale 및 maximum-scale
이러한 명령이 없을 때 브라우저는 사용자의 축소 단계를 5(20%-500%)에 이르도록 허용한다.이런 지령이 있을 때 범위는 10(10%에서 1000%)으로 확대할 수 있다.더 높은 축소 정도가 지원되지 않기 때문에 maxmum-scale=20을 설정하는 것과 maxmum-scale=10을 설정하는 것은 같은 효과가 있습니다.안드로이드 웹키트는 미니멀-scale을 지원하지 않습니다.마찬가지로, 그것의 축소 범위는 4 (25%-400%) 이며, 이 범위를 바꾸는 것은 지원되지 않는다
user-scalable
user-scalable=no는 축소 금지 표시
[meta 뷰포트 태그 변경]
대부분의 브라우저에서 메타 뷰포트 라벨을 변경할 수 있습니다. 메타 뷰포트가 문서의 첫 번째 메타 라벨이라고 가정하십시오

var meta = document.getElementsByTagName('meta')[0];
meta.setAttribute('content','width=400');

meta 태그를 제거하여 배치 뷰포트를 기본 너비로 되돌릴 수는 없습니다.그러나 그것을 고정된 값으로 설정할 수 있다.예를 들어 '데스크톱 레이아웃으로 전환' 기능을 제공하려면 폭을 980px 또는 1024px로 설정할 수 있습니다
[자주 사용하는 meta 뷰포트 태그]

이 메타 탭의 역할은 현재viewport의 폭을 장치의 폭과 같게 하고 사용자가 수동으로 축소하는 것을 허용하지 않습니다