[html] 메타 태그의 초기 스케일, 사용자 확장 가능, 최소 스케일, 최대 스케일 속성은 무엇입니까?

Program / 글쓴이

웹 사이트의 소스 코드를 살펴보고이 코드를 찾았습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">

이 초기 스케일, 사용자 확장 가능, 최소 스케일, 최대 스케일이 무엇이며 그 값이 무엇을 의미하는지 알고 싶습니다. 또한 그들이 받아들이는 모든 가치를 말해주세요.

답변

뷰포트 메타 태그이며 모바일 브라우저에 가장 적합합니다.

width = 장치 너비

즉, 브라우저에 “내 웹 사이트가 장치 너비에 맞게 조정됩니다”라는 메시지가 표시됩니다.

초기 규모

웹 사이트의 크기를 정의합니다.이 매개 변수는 초기 확대 / 축소 수준을 설정합니다. 즉, 1 개의 CSS 픽셀 이 1 개의 뷰포트 픽셀 과 같습니다. . 이 매개 변수는 방향을 변경하거나 기본 확대 / 축소를 방지 할 때 도움이됩니다. 이 매개 변수가 없으면 반응 형 사이트가 작동하지 않습니다.

최대 규모

최대 배율은 최대 확대 / 축소를 정의합니다. 웹 사이트에 접속할 때 최우선 순위는maximum-scale=1 이며 사용자가 확대 / 축소 할 수 없습니다.

최소 규모

최소 배율은 최소 확대 / 축소를 정의합니다. 위와 동일하게 작동하지만 최소 스케일을 정의합니다. 이 기능 maximum-scale은 크기가 크고 설정하려는 경우에 유용합니다.minimum-scale .

사용자 확장 가능

1.0에 할당 된 사용자 확장 가능 은 웹 사이트에서 사용자가 확대 또는 축소 할 수 있음을 의미합니다.

그러나에 할당 user-scalable=no하면 웹 사이트에서 사용자가 확대 또는 축소 할 수 없음을 의미합니다.

답변

사용자 확장 가능 :

user-scalable = yes (기본값) : 사용자가 웹 페이지를 확대 또는 축소 할 수 있습니다.

user-scalable = no 는 사용자가 확대 또는 축소하는 것을 방지합니다.

다음 기사를 읽으면 더 자세한 정보를 얻을 수 있습니다.

데모 코드 (권장)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
</head>
<body>
    <header>
    </header>
    <main>
        <section>
            <h1>do not using <mark>user-scalable=no</mark></h1>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>

스 니펫 확장

답변

viewport 모바일 브라우저의 메타 태그,

초기 규모의 속성은 페이지가 처음로드 줌 레벨을 제어합니다. 최대 규모 , 최소 규모 및 사용자 확장 속성은 사용자가 나 밖으로 페이지를 확대하도록 허용하는 방법을 제어합니다.

답변

이 메타 태그는 모든 반응 형 웹 페이지, 즉 휴대 전화, 태블릿 및 데스크톱과 같은 기기 유형에서 잘 레이아웃되도록 설계된 웹 페이지에서 사용됩니다. 속성은 그들이 말하는대로합니다. 그러나 MDN의 Using the viewport meta tag to control layout on mobile browsers 는

높은 dpi 화면에서이있는 페이지 initial-scale=1는 브라우저에 의해 효과적으로 확대됩니다.

다음은 페이지가 기본적으로 확대 / 축소가 0 인 상태로 표시되도록합니다.

<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">

답변

휴대폰과 태블릿에서 측면을 제어하기위한 것입니다. 여기에서 더 많은 정보를 찾을 수 있습니다 : https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

답변

이 게시물이 도움이 될 수 있습니다. https://css-tricks.com/snippets/html/responsive-meta-tag/ 메타 태그 및 다양한 속성에 대한 전체 설명을 제공합니다.

답변