모바일 브라우저는 일반적으로 화면보다 넓은 가상 창에서 페이지를 렌더링합니다. 이 가상 창은 뷰포트입니다. 목적은 모바일 터미널에 정상적으로 조정되지 않은 웹 페이지를 표시하여 사용자에게 완전히 표시 할 수 있도록하는 것입니다. 때로는 모바일 장치를 사용하여 데스크탑 웹 페이지에 액세스하면 수평 스크롤 막대가 표시되며 디스플레이 영역의 너비는 뷰포트의 너비입니다.
정기적으로 페이지를 조정할 수있는 경우 다음 코드를 사용하십시오.
<meta name = viewport content = width = device width, 초기 스케일 = 1 />
확대하고 싶지 않다면 다음 코드를 사용하십시오.
2. CSS의 픽셀과 장치 픽셀의 차이<meta name = viewport content = width = device-width, 초기 스케일 = 1.0, 최소 규모 = 1.0, 최대 규모 = 1.0, 사용자-규모 = no>
데스크탑 웹 페이지를 개발할 때 CSS의 1px는 장치에서 1px입니다. 그러나 CSS의 1px는 단지 추상적 값이며 실제 픽셀을 나타내지 않습니다. 모바일 장치에서는 다른 장치의 픽셀 밀도가 다르고 CSS의 1px는 실제 장치의 픽셀 값과 같지 않을 수 있습니다. 사용자 스케일링은 또한 CSS의 1px 1px의 장치 픽셀 수가 변경됩니다. 이 비율은 DevicePixElratio입니다
물리적 픽셀/독립 픽셀 = DevicePixelratio
콘솔의 브라우저 및 인쇄 창을 확대 할 수 있습니다. 그것의 독립적 인 픽셀은 CSS에서 px로 이해 될 수있다.
3. Viewport 기본암호:
<meta name = viewport content = width = device-width, 초기 스케일 = 1, 최대-스케일 = 1>
다음은 뷰포트의 여러 속성입니다. 이러한 특성은 혼합 방식으로 사용할 수 있습니다. 여러 속성은 동시에 쉼표로 분리해야합니다. 여기서는 이상적인 상황에서 뷰포트를 지칭하는 이상적인 뷰포트라는 개념을 확장합니다. 사용자 스케일링 및 수평 스크롤 막대없이 웹 페이지의 모든 내용을 정상적으로 볼 수 있으며 모든 텍스트를 명확하게 볼 수 있습니다. 이 텍스트가 CSS에서 아무리 작은 것이더라도 표시되면 명확하게 볼 수 있습니다.
| 재산 | 설명하다 |
|---|---|
| 너비 | 뷰포트의 너비를 제어하면 숫자를 지정할 수 있습니다. 또는 지정하도록 장치폭을 설정합니다 |
| 키 | 뷰포트의 높이를 제어하십시오. 이 속성은 그다지 중요하지 않으며 거의 사용되지 않습니다. |
| 초기 규모 | 페이지가 처음로드 될 때 이상 Viewport에서 줌 레벨을 제어합니다. 일반적으로 1으로 설정되며 소수점이 될 수 있습니다. |
| 최대 규모 | 사용자의 최대 스케일링 값이 숫자가 될 수 있으며 소수점이 될 수 있습니다. |
| 최소 규모 | 사용자의 최소 스케일링 값은 숫자가 될 수 있으며, 이는 소수로 가져갈 수 있습니다. |
| 사용자 확장 가능 | 사용자의 확장이 허용되는지 여부, 값은 아니요 또는 예, 아니요, 허용되지 않음, 예를 의미합니다. |
1. 전액 및 초기 규모
너비와 초기 규모가 설정되면 브라우저는 적응의 가장 큰 값을 자동으로 선택합니다. 세트 :
<메타 이름 = 뷰포트 내용 = 너비 = 400, 초기 스케일 = 1>
브라우저는 적응할 큰 값을 선택합니다. 현재 창의 이상적인 뷰포트의 너비가 300이고 초기 규모 값이 1 인 경우 너비의 값은 400입니다. 현재 창의 이상적인 뷰포트가 480 인 경우 480이 선택됩니다.
실제로, 너비 = 장치 width 및 초기 스케일 = 1은 이상적인 뷰포트의 적용을 나타내지 만 iPad 및 iPhone 및 IE와 같은 모바일 장치에서는 수평 및 수직 스크린이 구별되지 않으며 세로 화면의 너비는 기본적으로 취해집니다. 호환성을 작성하는 가장 좋은 방법은입니다
<meta name = viewport content = width = device width, 초기 스케일 = 1>
2. 속성을 동적으로 변경합니다
에이. document.write ()
document.write ( '<meta name = viewport content = width = device-width, 초기 스케일 = 1>')
B. 세트 주제
뷰포트 개념var mvp = document.getElementById ( 'testViewport');
mvp.setattribute ( 'content', 'width = 480');
모바일 브라우저는 일반적으로 화면보다 넓은 가상 창에서 페이지를 렌더링합니다. 이 가상 창은 뷰포트입니다. 목적은 모바일 터미널에 정상적으로 조정되지 않은 웹 페이지를 표시하여 사용자에게 완전히 표시 할 수 있도록하는 것입니다. 때로는 모바일 장치를 사용하여 데스크탑 웹 페이지에 액세스하면 수평 스크롤 막대가 표시되며 디스플레이 영역의 너비는 뷰포트의 너비입니다.
CSS의 픽셀과 장치 픽셀의 차이데스크탑 웹 페이지를 개발할 때 CSS의 1px는 장치에서 1px입니다. 그러나 CSS의 1px는 단지 추상적 값이며 실제 픽셀을 나타내지 않습니다. 모바일 장치에서는 다른 장치의 픽셀 밀도가 다르고 CSS의 1px는 실제 장치의 픽셀 값과 같지 않을 수 있습니다. 사용자 스케일링은 또한 CSS의 1px 1px의 장치 픽셀 수가 변경됩니다. 이 비율은 DevicePixElratio입니다
물리적 픽셀/독립 픽셀 = DevicePixelratio
콘솔의 브라우저 및 인쇄 창을 확대 할 수 있습니다. 그것의 독립적 인 픽셀은 CSS에서 px로 이해 될 수있다.
뷰포트 기본일반적인 모바일 최적화 된 사이트에는 다음과 유사한 컨텐츠가 포함됩니다.
<meta name = viewport content = width = device-width, 초기 스케일 = 1, 최대-스케일 = 1>
다음은 뷰포트의 여러 속성입니다. 이러한 특성은 혼합 방식으로 사용할 수 있습니다. 여러 속성은 동시에 쉼표로 분리해야합니다. 여기서는 이상적인 상황에서 뷰포트를 지칭하는 이상적인 뷰포트라는 개념을 확장합니다. 사용자 스케일링 및 수평 스크롤 막대없이 웹 페이지의 모든 내용을 정상적으로 볼 수 있으며 모든 텍스트를 명확하게 볼 수 있습니다. 이 텍스트가 CSS에서 아무리 작은 것이더라도 표시되면 명확하게 볼 수 있습니다.
| 재산 | 설명하다 |
|---|---|
| 너비 | 뷰포트의 너비를 제어하면 숫자를 지정할 수 있습니다. 또는 지정하도록 장치폭을 설정합니다 |
| 키 | 뷰포트의 높이를 제어하십시오. 이 속성은 그다지 중요하지 않으며 거의 사용되지 않습니다. |
| 초기 규모 | 페이지가 처음로드 될 때 이상 Viewport에서 줌 레벨을 제어합니다. 일반적으로 1으로 설정되며 소수점이 될 수 있습니다. |
| 최대 규모 | 사용자의 최대 스케일링 값이 숫자가 될 수 있으며 소수점이 될 수 있습니다. |
| 최소 규모 | 사용자의 최소 스케일링 값은 숫자가 될 수 있으며, 이는 소수로 가져갈 수 있습니다. |
| 사용자 확장 가능 | 사용자의 확장이 허용되는지 여부, 값은 아니요 또는 예, 아니요, 허용되지 않음, 예를 의미합니다. |
1. 전액 및 초기 규모
너비와 초기 규모가 설정되면 브라우저는 적응의 가장 큰 값을 자동으로 선택합니다. 세트 :
<메타 이름 = 뷰포트 내용 = 너비 = 400, 초기 스케일 = 1>
브라우저는 적응할 큰 값을 선택합니다. 현재 창의 이상적인 뷰포트의 너비가 300이고 초기 규모 값이 1 인 경우 너비의 값은 400입니다. 현재 창의 이상적인 뷰포트가 480 인 경우 480이 선택됩니다.
실제로, 너비 = 장치 width 및 초기 스케일 = 1은 이상적인 뷰포트의 적용을 나타내지 만 iPad 및 iPhone 및 IE와 같은 모바일 장치에서는 수평 및 수직 스크린이 구별되지 않으며 세로 화면의 너비는 기본적으로 취해집니다. 호환성을 작성하는 가장 좋은 방법은입니다
<meta name = viewport content = width = device width, 초기 스케일 = 1>
2. 속성을 동적으로 변경합니다
에이. document.write ()
document.write ( '<meta name = viewport content = width = device-width, 초기 스케일 = 1>')
B. 세트 주제
var mvp = document.getElementById ( 'testViewport');
mvp.setattribute ( 'content', 'width = 480');
좋아,이 기사는 당신에게 소개되었습니다. 자신의 테스트 요구에 따라 선택할 수 있습니다. 일반적으로 PC와 휴대폰은 적응성없이 사용할 수 있으며 스케일링을 지원하지 않습니다. 휴대폰으로 점프하면 영향없이 확장 할 수 있습니다.