"initial-scale = 1.0"도 설정되어있을 때 뷰포트 메타 태그에서 "width = device-width"를 제거하는 부작용

그동안 <meta name="viewport">태그 표준화가, 그것은 "이 때문에 사실상의 지배에 대부분의 모바일 브라우저에서 존경합니다."

실제 웹 표준이 아닌 단점 중 하나는 자세한 문서가 다른 표준만큼 유용하지 않다는 것입니다. CSS 워킹 그룹은 그게 내가 주로 권위있는 작품으로 사용하고 무엇 때문에, 이것에 대한 사양을 가지고있다.

내 주요 질문은 다음과 같습니다

다음 선언들 사이에 인식 된 차이점은 무엇입니까?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="initial-scale=1.0">

또는이 두 @viewport CSS at-rule 의 차이점은 무엇입니까?

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

내가 그 @viewport번역에 도착한 방법 :

width=device-width 에 min-width: extend-to-zoom; max-width: 100vw;

CSS 장치 적응 모듈 레벨 1 문서 상태 :

width및 height뷰포트 <META>성질로 번역 width하고 height, 설정, 디스크립터 min-width/의 min-height가치 extend-to-zoom및 max-width/의 max-height뷰포트로부터의 길이 값.

그들은 또한 예제를 제공합니다 :

이 <META>요소는

<meta name="viewport" content="width=500, height=600">

로 번역 :

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

width속기 디스크립터 로 기술된다 :

이 둘을 설정하는 약식 설명입니다 min-width및 max-width. 하나 개의 <viewport-length>값은 모두 설정됩니다 min-width하고 max-width그 값으로 설정합니다. 두 개의 <viewport-length>값이 min-width첫 번째와 max-width두 번째로 설정 됩니다 .

따라서 이는 width: extend-to-zoom 500px;에 해당하는 이유입니다 min-width: extend-to-zoom; max-width: 500px;.

그 100vw부분 만 남았습니다 . 내 섹션 10.4 , 그들은 설명 :

device-width그리고 device-height각각 100vw 및 100vh로 변환

그래서 우리는 최종적으로 어떻게 width=device-width번역 되는지 볼 수 있습니다 min-width: extend-to-zoom; max-width: 100vw;.

initial-scale=1.0 에 zoom: 1.0; width: extend-to-zoom;

이것은 간단한 예입니다 .

이 <META>요소는

<meta name="viewport" content="initial-scale=1.0">

로 번역 :

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

내가 여기있는 다른 질문은, 무엇 정확하게 는 IS extend-to-zoom값은?

그것에 대한 문서 와 그 해결 절차 를 이해하기가 어렵습니다. 누구든지 이것에 대한 몇 가지 추가 예를 지적 할 수 있다면 크게 감사하겠습니다.

위의 모든 것 외에도 몇 가지 뷰포트 구성을 테스트하기 위해 빠른 사이트 ( https://romellem.github.io/temp-site/viewport/)를 모았습니다 .

즉:

• content = "width = 장치 너비, 초기 스케일 = 1.0"
• content = "initial-scale = 1.0"

이것은 테스트에 도움이 될 수 있습니다.

요청한 내용을 자세히 살펴보기 전에 viewport메타 태그가 존재하는 이유를 먼저 살펴 보겠습니다 . 내가 모은 것은 다음과 같습니다.

왜 viewport태그 가 필요 합니까?

뷰포트는 웹 컨텐츠를 볼 수있는 영역입니다. 일반적으로 렌더링 된 페이지 (웹 컨텐츠)는 뷰포트보다 큽니다. 결과적으로, 뷰포트가 모든 것을 표시 할 수 없기 때문에 일반적으로 스크롤 막대를 사용하여 숨겨진 컨텐츠를 봅니다. CSS 장치 적응 모듈 레벨 1에서 인용 :

좁은 뷰포트는 데스크탑 브라우저에서보기 좋게 디자인 된 문서의 문제입니다. 결과적으로 모바일 브라우저 공급 업체는 뷰포트 크기와 다르고 일반적인 데스크탑 브라우저 창의 크기와 유사한 고정 된 초기 포함 블록 크기를 사용합니다. 스크롤 또는 패닝 외에도 확대 / 축소는 종종 문서 개요와 문서의 특정 영역을 확대하여 읽고 상호 작용하는 데 사용됩니다.

모바일 장치 (및 기타 작은 장치)에서 초기 포함 블록 은 일반적으로 뷰포트보다 큽니다. 예를 들어, 화면 너비가 모바일 디바이스 640px의 초기 포함 블록은 980px입니다. 이 경우 초기 포함 블록이 축소되어 640px모바일 화면에 맞출 수 있습니다. 이 640px너비 (화면 너비)는 initial-width토론과 관련이있는 뷰포트 라고 합니다.

그래서 ... 왜이 viewport태그 가 필요 합니까? 오늘날에는 모바일 장치 용으로 디자인 할 수 있는 미디어 쿼리 가 있습니다. 그러나이 미디어 쿼리는 실제 뷰포트의 너비 에 따라 다릅니다 . 모바일 장치에서 사용자 에이전트는 자동으로 초기 뷰포트 크기를 다른 고정 된 크기 (일반적으로 초기 뷰포트 크기보다 큼)로 스타일을 지정합니다. 따라서 모바일 장치의 뷰포트 너비가 고정되어 있으면 미디어 쿼리에 사용하는 CSS 규칙은 단순히 뷰포트 너비가 변하지 않기 때문에 실행되지 않습니다. 은 Using viewport태그를, 우리는 할 수 있습니다 제어 실제 (UA에 의해 스타일 후) 뷰포트의 폭을. MDN에서 인용 :

그러나이 메커니즘은 미디어 쿼리를 사용하여 좁은 화면에 최적화 된 페이지에는 적합하지 않습니다. 예를 들어 가상 뷰포트가 980 픽셀 인 경우 640px 또는 480px 이하로 시작하는 미디어 쿼리는 사용되지 않으므로 이러한 효과의 효율성이 제한됩니다. 반응 형 디자인 기법.

점을 유의 viewport태그가 너무뿐만 아니라 폭을 실제 뷰포트의 높이를 변경할 수 있습니다

viewport 태그 width

widthA의 viewport태그로 번역 max-width에 @viewport규칙입니다. widthas 을 선언 하면 규칙 에서 device-width로 변환됩니다 . 뷰포트를 기준으로 백분율 값 이 결정 됩니다. 따라서 위의 예를 계속 사용하면 의 값은로 결정 됩니다. 알다시피, 이것은 만 지정합니다 . 가 자동으로됩니다 .100%@viewportinitial-widthmax-width640pxmax-widthmin-widthextend-to-zoom

extend-to-zoom

귀하의 질문은 확장 확대의 가치가 정확히 무엇 입니까? 내가 모은 것에서 그것은 주어진 확대 / 축소 수준에서보기 영역에 맞게 자체 확장되는 뷰포트를 지원하는 데 사용되는 값입니다. 즉, 지정된 확대 / 축소 값에 따라 변경되는 뷰포트 크기 값입니다. 예를 들어? max-zoomUA 스타일 시트 의 값이 is 5.0이고 initial-widthis 320px인 <meta name="viewport" content="width=10">경우 초기 실제 너비는로 결정 64px됩니다. 장치에 320px 만 있고 5x일반 값만 확대 / 축소 할 수있는 경우 최소 뷰포트 크기는 320px divided by 5한 번에 64px 만 표시 하고 그렇지 않은 경우를 의미합니다. 10px32 배 확대가 필요합니다!). 이 값은 min-width및 max-width값 을 확장 (변경)하는 방법을 결정하기 위해 알고리즘 에서 사용되며 실제 뷰포트 너비를 결정하는 데 중요한 역할을합니다.

함께 모아서

그래서 본질적으로 차이 무엇 <meta name="viewport" content="width=device-width, initial-scale=1.0">과 <meta name="viewport" content="initial-scale=1.0">? 알고리즘 단계 ( this 및 this ) 만 다시 실행하십시오 . 후자 ( width속성이 없는 것)를 먼저 해보자 . ( initial-width뷰포트의 값 이이라고 가정합니다 640px.)

• width설정이 결과에없는 max-width및 min-width있는 extend-to-zoom에 @viewport규칙입니다.
• initial-scale입니다 1.0. 이것은 zoom값이1.0
• 를 해결extend-to-zoom 합시다 . 단계 :
  1. extend-zoom = MIN(zoom, max-zoom). MIN동작 비되는 값으로 확인 auto. 여기서, zoom이다 1.0하고 max-zoom있다 auto. 이 수단 extend-zoom이다1.0
  2. extend-width = initial-width / extend-zoom. 이것은 쉬워요; 당신이 얻을 1 씩 분할 (640)는 extend-width동일하다640
  3. extend-zoom이 아닌 이기 때문에 auto두 번째 조건부로 건너 뜁니다. max-width실제로 extend-to-zoom이것은 max-width로 설정 됨을 의미합니다 extend-width. 그러므로,max-width = 640
  4. min-width또한 extend-to-zoom,이 수단은 설정 min-width에 max-width. 우리는 얻는다min-width = 640
• 이후 비 해결auto (IE의 extend-to-zoom값)을 max-width하고 min-width. 다음 절차를 진행할 수 있습니다 . min-width또는 max-width이 아니기 때문에 프로 시저 auto에서 첫 번째 if를 사용 하므로 초기 실제 뷰포트는 width로 설정 MAX(min-width, MIN(max-width, initial-width))됩니다 MAX(640, MIN(640, 640)). 640초기 실제 뷰포트로 해결됩니다.width
• 다음 절차로 넘어 갑니다 . 이 단계에서는 width입니다 auto. 값은 변경되지 않으며 실제 뷰포트 width는640px

전자를 해보자.

• width설정되고,이 결과 max-width인 100%( 640px우리의 경우) 및 min-width되 extend-to-zoom에 @viewport규칙.
• initial-scale입니다 1.0. 이것은 zoom값이1.0
• 를 해결extend-to-zoom 합시다 . (위과 거의 동일) 신중하게 단계를 수행하면, 당신은 함께 종료됩니다 max-width의 640px및 min-width의 640px.
• 아마도 패턴을 볼 수있을 것입니다. 실제 뷰포트 너비는 640px입니다.

그렇다면 인식되는 차이점은 무엇입니까? 본질적으로 없음 . 둘 다 같은 일을합니다. 내 설명이 도움이되기를 바랍니다. ;-) 어떤 것이 잘못 되었다면, 저에게 말하십시오.