HTML 메타 태그의 뷰포트 설정
- Barbara Streisand원래의
- 2024-11-04 07:07:30744검색
웹페이지를 디자인할 때 다음과 같은 메타 태그 줄이 추가됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
쉽게 읽을 수 있는 텍스트가 있는 웹 페이지가 모바일 화면에 표시될 수 있도록 하기 위해서입니다. 그러나 저는 이 줄이 무엇을 말하는지 주의깊게 연구한 적이 없으며 오늘 시간을 들여 테스트해 보았습니다.
요소 1: devicePixelRatio를 사용하여 픽셀 크기 조정
웹 페이지의 실제 표시는 CSS 픽셀(px)을 기반으로 합니다. 이 CSS 픽셀은 실제 하드웨어 픽셀이 아닙니다. 둘 사이의 대응 관계는 window.devicePixelRatio에 의해 결정됩니다. 현재 장치에서는 2×2 픽셀을 사용하여 px를 표시합니다. 이 비율을 통해 동일한 px 수의 단어를 다른 크기의 장치에서 너무 작아서 읽을 수 없는 크기로 표시할 수 있습니다. 다음은 다른 장치 또는 다른 디스플레이 비율에서 얻은 devicePixelRatio 비율입니다.
| 裝置 | 解析度 | 像素密度 | devicePixelRatio 值 |
|---|---|---|---|
| OPPA A31 | 720×1600 | 270PPI | 2 |
| Google Pixel 8a | 1080×2400 | 430PPI | 2.625(Chrome) |
| Google Pixel 8a | 1080×2400 | 430PPI | 2.6087(Firefox) |
| Windows 11 筆電 | 1920×1080 | N/A | 1 |
| Windows 11 13.3 吋筆電 顯示比例 125% | 1920×1200 | N/A | 1.25 |
동일한 기기에서도 브라우저마다 비율이 다를 수 있음을 알 수 있습니다. 디스플레이는 이 비율을 기반으로 하여 px 크기를 나타냅니다.
요소 2: 뷰포트 크기 설정
뷰포트라고 불리는 것은 웹페이지를 표시하는 데 사용할 수 있는 브라우저 창 내의 영역을 의미합니다. 이 크기는 1단계에서 얻은 px 단위로도 측정됩니다. 휴대폰 등의 기기에는 창이 없기 때문에 뷰포트는 가상의 가상창입니다.
뷰포트 설정에서 가장 중요한 것은 너비이며, 너비는 1에서 10000까지 설정할 수 있습니다. 이는 웹 페이지 요소 배열, 텍스트 배치 등에 영향을 미칩니다. 모바일 장치에서 뷰포트를 화면만큼 넓게 설정하려면 장치의 실제 픽셀 너비를 devicePixelRatio로 나누어 뷰포트 너비를 px로 가져오거나 직접 장치 너비로 설정할 수 있습니다. 시스템의 도움을 받아 웹페이지의 너비가 장치 화면의 너비와 일치하도록 계산하세요. 뷰포트가 설정되지 않은 경우 기본값은 980입니다.
JavaScript에서는 다음을 통해 화면과 뷰포트의 너비를 px 단위로 얻을 수 있습니다.
| 屬性 | 說明 |
|---|---|
| window.innerWidth | viewport 的寬度 |
| window.screen.width | 裝置的螢幕寬度 |
요소 3: 스케일링 비율
페이지를 볼 때 사용자가 확대 및 축소할 수 있습니다. 뷰포트 설정의 초기 배율은 페이지가 처음 로드된 후 확대/축소 비율(0.1~10.0)을 설정하는 것입니다. 설정하지 않으면 브라우저는 기본적으로 페이지의 전체 가로 콘텐츠를 표시할 수 있는 가장 큰 비율로 자동으로 크기를 조정합니다.
앞서 언급했듯이 뷰포트가 설정되지 않은 경우 기본 너비는 980px입니다. 방금 예시로 본 Google Pixel 8A의 Firefox를 사용하면 화면 너비는 1080/2.6087 = 414px이고 브라우저는 반드시 웹 페이지의 가로 콘텐츠를 완전히 표시하려면 웹 페이지를 414/980 =42.2%로 축소해야 하므로 글꼴이 너무 작아서 읽을 수 없게 됩니다.
필요한 경우 뷰포트에서 최소 배율을 설정하여 사용자가 확대할 수 있는 최소 확대/축소 비율을 제한할 수도 있습니다. 기본값은 0.1입니다. 웹 페이지의 가로 콘텐츠를 완전히 표시하기 위한 최대 확대/축소 비율이 최소 배율로 설정된 배수보다 큰 경우 최소 배율 설정이 대체됩니다. 즉, 확대/축소 배율은 가로 콘텐츠가 표시될 때까지만 줄일 수 있습니다. 웹페이지를 표시할 수 있습니다. 최대 배수를 제한하기 위해 maximum-scale을 설정할 수도 있습니다. 기본값은 10입니다. 또는 사용자 확장 가능 여부를 1/0 또는 예/아니요로 설정하여 사용자가 확대/축소할 수 있는지 여부를 추가로 제한할 수 있습니다.
JavaScript에서는 다음과 같이 현재 페이지의 확대/축소 비율을 얻을 수 있습니다.
| 屬性 | 說明 |
|---|---|
| window.visualViewport.scale | viewport 目前的縮放倍數 |
실제 측정
아래에서는 실제 테스트를 위해 다음 웹페이지를 사용합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
컴퓨터의 Firefox
컴퓨터의 Firefox는 다음과 같이 표시됩니다.
뷰포트의 너비는 현재 브라우저 창의 너비인 646px임을 알 수 있습니다. 뷰포트 설정을 제거해도 표시 결과는 변경되지 않습니다. 의도적으로 뷰포트의 너비를 창보다 넓게 설정한 경우:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
window.addEventListener('load', function() {
document.getElementById('devicePixelRatio').textContent = window.devicePixelRatio;
document.getElementById('screenWidth').textContent = window.screen.width;
document.getElementById('innerWidth').textContent = window.innerWidth;
// 取得並顯示目前的縮放倍數
function updateScale() {
const currentScale = window.visualViewport ? window.visualViewport.scale : '不支援';
document.getElementById('currentScale').textContent = currentScale;
}
// 初始化顯示
updateScale();
// 監聽縮放變化
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', updateScale);
}
});
</script>
1
2
3
4
5
6
7
8
window.devicePixelRatio =
window.screen.width =
window.innerWidth =
目前縮放倍數 =
뷰포트의 실제 값에는 영향을 미치지 않습니다. 즉, 일반 컴퓨터의 브라우저에서는 뷰포트 설정 여부에 차이가 없습니다.
모바일의 Firefox
뷰포트가 설정되지 않은 경우 방금 HTML 콘텐츠의 뷰포트 설정을 주석으로 변경하세요.
<meta name="viewport" content="width=1200, initial-scale="1.0">
휴대폰의 Firefox는 다음과 같이 표시됩니다.
축소된 부분을 확대하면 다음과 같습니다.
기본 뷰포트 너비는 980이므로 웹 페이지의 가로 콘텐츠를 완전히 표시하기 위해 웹 페이지의 가로 콘텐츠를 표시하려면 자동으로 0.4224배로 축소됩니다. 이 배수는 최소 배율의 기본값인 0.1보다 크며, 사용자가 직접 표시를 축소하더라도 최대 0.4224배까지만 축소할 수 있습니다.
뷰포트를 화면과 동일한 너비로 설정
뷰포트 설정을 다시 추가하는 경우:
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
표시되는 화면은 다음과 같습니다.
뷰포트 너비(window.innerWidth)와 기기 화면 너비(window.screen.width)가 모두 414px인 것을 확인할 수 있으며, 웹페이지는 이 너비로 표시됩니다. 확대/축소 비율은 1입니다. 확인 표시된 웹 페이지 내용을 명확하게 읽습니다. 이는 웹 페이지에 가로 콘텐츠를 표시할 수 있는 최대 확대/축소 비율이므로 기본 최소 배율인 0.1도 대체됩니다. 사용자는 페이지를 최소 1배까지만 확대/축소할 수 있습니다.
기본 확대/축소 비율 1을 유지하지만 다음과 같이 뷰포트 너비를 설정하지 않은 경우:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
실제 결과는 너비를 device-width로 설정한 것과 같습니다.
뷰포트 너비를 의도적으로 설정
뷰포트 너비를 의도적으로 980으로 설정한 경우:
<meta name="viewport" content="initial-scale=1.0">
은 다음과 같이 표시됩니다.
이제 뷰포트의 너비가 화면보다 넓어졌기 때문에 정렬 시 화면 밖으로 확장됩니다. 실제 표시된 결과에서도 화면 너비가 실제로 980임을 확인할 수 있습니다.
다음과 같이 의도적으로 뷰포트 너비를 화면보다 좁게 설정한 경우:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
브라우저는 화면 너비를 가장 낮은 뷰포트 너비로 사용하므로 표시 결과는 너비를 장치 너비로 설정한 것과 동일합니다.
뷰포트 너비만 설정하고 초기 크기는 설정하지 않은 경우 다음과 같습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
window.addEventListener('load', function() {
document.getElementById('devicePixelRatio').textContent = window.devicePixelRatio;
document.getElementById('screenWidth').textContent = window.screen.width;
document.getElementById('innerWidth').textContent = window.innerWidth;
// 取得並顯示目前的縮放倍數
function updateScale() {
const currentScale = window.visualViewport ? window.visualViewport.scale : '不支援';
document.getElementById('currentScale').textContent = currentScale;
}
// 初始化顯示
updateScale();
// 監聽縮放變化
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', updateScale);
}
});
</script>
1
2
3
4
5
6
7
8
window.devicePixelRatio =
window.screen.width =
window.innerWidth =
目前縮放倍數 =
아직도 시작 확대/축소 비율로 1.0을 사용하고 있습니다.
1보다 큰 시작 배수를 설정하세요.
확대/축소 비율을 변경하면 웹페이지가 처음 로드된 후 지정된 확대/축소 비율을 사용할 수 있습니다. 예:
<meta name="viewport" content="width=1200, initial-scale="1.0">
결과가 3배로 확대된 것을 볼 수 있습니다:
초기 배율은 웹 페이지를 처음 로드할 때만 유효하므로 설정을 수정하고 웹 페이지를 다시 로드하더라도 웹 페이지의 원래 확대/축소 비율이 새로 설정된 확대/축소 범위 내에 있는 경우에만 유효합니다. , 원래 확대/축소 비율이 유지됩니다. 따라서 보다 정확한 테스트를 위해 새 개인 정보 보호 페이지를 여는 것이 좋습니다. 그렇지 않으면 초기 배율을 수정해도 표시 비율이 변경되지 않을 수 있습니다.
단순히 사용자가 웹페이지를 확대해서 보도록 하려면 최소 배율을 설정하면 되지만 웹페이지 콘텐츠를 처음부터 확대하면 더 정확합니다.
시작 배수를 1보다 작게 설정하세요.
초기 배율을 1보다 작게 설정할 수도 있습니다. 즉, 표시 영역이 축소됩니다. 그러나 뷰포트 너비가 비례적으로 줄어들어 화면 너비보다 작아지면 브라우저에서만 가능하다는 규칙을 위반하게 됩니다. 웹 페이지의 전체 수평 콘텐츠를 표시할 수 있는 최소 크기로 축소됩니다. 현재 설정된 뷰포트 너비를 축소 계수로 자동으로 나누어 웹 페이지가 최소 배수로 축소될 때 완전한 수평 콘텐츠를 유지할 수 있습니다. . 예를 들어 0.5로 설정한 경우:
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
은 뷰포트의 너비를 414/0.5=828px로 변경합니다.
자세한 데이터를 보려면 확대하세요.
처음에 표시 영역 너비를 충분히 넓게 설정하면 메타 태그의 설정이 유지됩니다. 예:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
결과는 다음과 같습니다.
너비가 변경되지 않은 것을 볼 수 있습니다.
사진 표시
웹 페이지에 이미지를 넣으면 이미지의 해상도가 px 단위로 해석되므로 devicePixelRatio가 2인 기기에서는 200×200 이미지가 400×400이 됩니다. 물리적 픽셀이 표시됩니다. 예를 들어, 방금 웹페이지 끝에 사진을 추가했습니다:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
584×604 크기의 이미지입니다:
웹페이지에는 다음과 같은 결과가 표시됩니다.
이미지가 더 넓기 때문에 화면 경계를 초과하지만 전체 페이지는 여전히 뷰포트에서 설정한 너비에 따라 배열되므로 4번 상자가 두 번째 열에 압착됩니다. 이 경우 사용자가 줄일 수 있는 요소는 초기 배율로 설정한 1.0보다 작을 수 있으며, 다음과 같이 완전히 표시할 수 있는 이미지의 너비만큼 작을 수 있습니다.
위 사진에서는 0.749배로 축소되었습니다.
고의로 뷰포트 너비를 이미지와 동일한 너비로 설정한 경우:
이전 결과와 결과가 다른 것을 볼 수 있습니다. 이제 위의 두 사각형 4와 5가 첫 번째 열에 순위가 지정되었습니다. 이는 뷰포트 설정이 넓어졌기 때문입니다.
위 내용은 HTML 메타 태그의 뷰포트 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!