데스크톱 플랫폼의 웹 레이아웃에 있는 메타 태그는 모두가 잘 알고 있습니다. 이 태그는 항상 head 요소 안에 있습니다. SEO를 하는 친구들은 틀림없이 모바일 플랫폼의 메타에 대해 이야기할 것입니다. , 모바일 플랫폼에서 메타 태그의 마법적인 효과는 무엇입니까?
1. 메타 뷰포트
모바일 플랫폼 메타태그에 관해 이야기하자면 뷰포트(viewport)란 무엇일까요?
뷰포트는 데스크톱 브라우저의 경우 도구 모음, 상태 표시줄, 스크롤 막대 등을 모두 제거한 후 웹 페이지를 보는 데 사용되는 영역을 의미합니다.
기존 WEB 페이지의 경우 iPhone에서는 너비가 980으로 표시되는 것이 일반적이며 화면도 꽉 채웁니다. 그러나 웹앱의 경우에는 약간 문제가 될 수 있습니다. 세로 모드에서 100cm, 320페이지가 iPhone에 표시되는 효과는 무엇입니까? 아이폰은 가로가 320mm가 아니라 화면을 꽉 채워야 한다고 생각하는 분들도 계시겠지만 현실은 어떤가요? iPhone에서 다음 레이아웃이 어떻게 나타나는지 살펴 보겠습니다
따라서 뷰포트를 변경해야 합니다. 설정할 수 있는 속성 값은 다음과 같습니다.
width: 뷰포트 너비(범위 200~10,000, 기본값은 980픽셀)
height: 뷰포트 높이(범위 223~10,000)
initial-scale: 초기 크기 조정(범위 >) ;0 ~ 10)
minimum-scale: 사용자가 확대할 수 있는 최소 비율
maximum-scale: 사용자가 확대할 수 있는 최대 비율
user-scalable: 여부 사용자가 수동으로 확대/축소할 수 있습니다
이러한 속성에 대해 하나 이상의 속성을 설정할 수 있으며 동시에 모두 설정할 필요는 없습니다. iPhone은 대신 설정한 속성을 기반으로 다른 속성 값을 자동으로 계산합니다. 기본값을 직접 사용합니다.
initial-scale=1로 설정하면 세로 모드에서는 너비와 높이가 자동으로 320*356이 되고(주소 표시줄 등이 모두 공간을 차지하므로 320*480이 아님) 가로 모드에서는 480*208이 됩니다. 마찬가지로 너비만 설정하면 초기 크기와 높이가 자동으로 계산됩니다. 예를 들어 width=320으로 설정하면 초기 배율은 화면이 세로 모드일 때 1이고 화면이 가로 방향일 때 1.5가 됩니다. 그렇다면 이러한 설정은 Safari에 어떻게 알릴까요? 실제로 이는 매우 간단하며 다음과 같은 형식의 메타입니다.
telephone=yes를 사용하면 숫자를 전화 접속 링크로 변환할 수 있습니다. 변환 기능을 활성화하려면 이 메타를 작성할 필요가 없습니다. 기본적으로 활성화되어 있습니다.
3. 메타의 apple-mobile-web-app 가능
이 메타의 기능은 기본 Apple 도구 모음과 메뉴 표시줄을 삭제하는 것입니다. 콘텐츠에는 "yes"와 "no"라는 두 가지 값이 있습니다. 도구 모음과 메뉴 표시줄을 표시해야 하는 경우 이 메타 줄을 추가할 필요가 없습니다. 기본값은 표시하는 것입니다.
4. apple-mobile-web-app-status-bar-style의 메타