메타 태그의 초기 스케일, 사용자 확장 가능, 최소 스케일, 최대 스케일 속성은 무엇입니까?
웹 사이트의 소스 코드를 살펴보고이 코드를 찾았습니다.
<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 모바일 브라우저의 메타 태그,
초기 규모의 속성은 페이지가 처음로드 줌 레벨을 제어합니다. 최대 규모 , 최소 규모 및 사용자 확장 속성은 사용자가 나 밖으로 페이지를 확대하도록 허용하는 방법을 제어합니다.
This meta tag is used by all responsive web pages, that is those that are designed to layout well across device types - phone, tablet, and desktop. The attributes do what they say. However, as MDN's Using the viewport meta tag to control layout on mobile browsers indicates,
On high dpi screens, pages with
initial-scale=1will effectively be zoomed by browsers.
I've found that the following ensures that the page displays with zero zoom by default.
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
It's for controlling aspect on mobile phones and tablets. You will find more info here : https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
'code' 카테고리의 다른 글
| 많은 sass 파일을 포함하는 전체 디렉토리 / 폴더의 변경 사항을 보는 방법 (0) | 2020.11.14 |
|---|---|
| Visual Studio 2013 세로 가새 선 (0) | 2020.11.14 |
| Windows 디스플레이 설정을 얻는 방법은 무엇입니까? (0) | 2020.11.13 |
| PhantomJS : 내가 시도하는 모든 것에 대해 "Killed : 9"획득 (0) | 2020.11.13 |
| 잘 사용되지 않는 자바 어설 션 (0) | 2020.11.13 |