모바일 html5 메타태그_html5 튜토리얼 스킬의 마법같은 효과

모바일 웹사이트를 만들 때 방문자가 볼 수 있는 페이지의 단순성과 쉬운 조작 등에 더해 메타태그 설정도 적절하게 설정하면 모바일의 검색 엔진 최적화가 향상됩니다. 웹사이트와 모바일 브라우저의 렌더링은 매우 유용합니다. 데스크탑 플랫폼의 웹 레이아웃에 있는 메타 태그는 모두가 잘 알고 있으며 항상 head 요소 안에 위치합니다. SEO를 하는 친구들은 메타에 대한 특별한 느낌을 가지고 있을 것입니다. 오늘은 모바일 플랫폼의 메타 태그에 대해 이야기하겠습니다. . 모바일 플랫폼에서 메타 태그의 마법 같은 효과는 무엇입니까?
1. 메타의 뷰포트
모바일 플랫폼 메타태그에 있어서 뷰포트란 무엇일까요?
뷰포트는 데스크톱 브라우저의 경우 도구 모음, 상태 표시줄, 스크롤 막대 등을 모두 제거한 후 웹 페이지를 보는 데 사용되는 영역을 의미합니다.
기존 WEB 페이지의 경우 iPhone에서는 너비가 980으로 표시되는 것이 일반적이며 화면도 꽉 채웁니다. 그러나 웹앱의 경우에는 약간 문제가 될 수 있습니다. 세로 모드에서 100cm, 320페이지가 iPhone에 표시되는 효과는 무엇입니까? 아이폰은 가로가 320mm가 아니라 화면을 꽉 채워야 한다고 생각하는 분들도 계시겠지만 현실은 어떤가요? iPhone에서 다음 레이아웃이 어떻게 나타나는지 살펴 보겠습니다

코드 복사

코드는 다음과 같습니다.

;body>

AppUE



따라서 뷰포트를 변경해야 하며 설정할 수 있는 속성 값은 다음과 같습니다.

width: 뷰포트의 너비(200~10,000 범위, 기본값은 980픽셀)
height: 뷰포트의 높이(범위: 223 ~ 10,000)
initial-scale: 초기 크기 조정(범위: 0 ~ 10)
minimum-scale: 사용자가 확대/축소할 수 있는 최소 크기 to
maximum-scale: 사용자가 확대/축소할 수 있는 최대 규모
user-scalable: 사용자가 수동으로 확대/축소할 수 있는지 여부

이러한 속성의 경우 하나 이상을 설정할 수 없습니다. 동시에 모두 설정해야 합니다. iPhone은 기본값을 사용하는 대신 사용자가 설정한 속성을 기반으로 다른 속성 값을 자동으로 계산합니다.
initial-scale=1로 설정하면 세로 모드에서는 너비와 높이가 자동으로 320*356이 되고(주소 표시줄 등이 모두 공간을 차지하므로 320*480이 아님) 가로 모드에서는 480*208이 됩니다. 마찬가지로 너비만 설정하면 초기 크기와 높이가 자동으로 계산됩니다. 예를 들어 width=320으로 설정하면 초기 배율은 화면이 세로 모드일 때 1이고 화면이 가로 방향일 때 1.5가 됩니다. 그렇다면 이러한 설정은 Safari에 어떻게 알릴까요? 실제로



코드 복사


코드는 다음과 같습니다. 다음:

자, 페이지를 전체 화면으로 배치할 수 있으므로 페이지가 아주 작게 표시되는 것에 대해 더 이상 걱정할 필요가 없습니다!

2. 메타 형식 감지

코드 복사
코드는 다음과 같습니다:

링크 스타일을 추가하지 않고 숫자열을 명확하게 썼는데, 아이폰은 자동으로 텍스트에 링크 스타일을 추가하고, 숫자를 클릭하면 자동으로 해당 번호로 전화가 걸립니다! 이 전화 접속 링크를 제거하는 방법은 무엇입니까? 이때 우리 메타는 다시 마법을 보여주어야 합니다.
telephone=no는 전화 접속 링크로의 변환을 금지합니다!
telephone=yes를 사용하면 숫자를 전화 접속 링크로 변환할 수 있습니다. 변환 기능을 활성화하려면 이 메타를 작성할 필요가 없습니다. 기본적으로 활성화되어 있습니다.

3. apple-mobile-web-app-capable의 메타

이 메타의 기능은 기본 Apple 도구 모음과 메뉴 표시줄을 삭제하는 것입니다. 콘텐츠에는 "yes"와 "no"라는 두 가지 값이 있습니다. 도구 모음과 메뉴 표시줄을 표시해야 하는 경우 이 메타 줄을 추가할 필요가 없습니다. 기본값은 표시하는 것입니다.
4. apple-mobile-web-app-status-bar 스타일의 메타

코드 복사

코드는 다음과 같습니다.

상태 표시줄 표시 스타일을 제어하는 ​​기능입니다

코드 복사

코드는 다음과 같습니다.

status-bar-style:black
status-bar-style:black-translucent

오늘은 어떤 메타 태그가 필요한지에 대해 간략하게 이야기하겠습니다. 웹사이트의 모바일 버전에 추가하세요:
viewport
viewport는 원래 Apple에서 모바일 버전용으로 만든 표준입니다. iPhone의 Safari는 Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox와 같은 대부분의 다른 모바일 브라우저에서 허용되는 Big Seller로 인해
사이트를 전체 화면 너비로 만드는 가장 기본적인 예입니다. 모바일:

코드 복사

코드는 다음과 같습니다.

휴대용
이 라벨과 MobileOptimized가 도입되었습니다. 아래는 기능 기계 시대의 사실상의 레이블입니다.
HandheldFriendly 태그는 AvantGo 브라우징에서 모바일 콘텐츠를 표시하는 데 처음 사용되었으며 나중에 모바일 사이트 표시를 위한 보편적인 표준이 되었지만 이 태그의 지원 여부는 알려져 있지 않습니다.

코드 복사

코드는 다음과 같습니다.

MobileOptimized
이것은 결국 모바일 콘텐츠를 식별하는 또 다른 방법이 된 Windows 전용 메타 태그이지만 이 태그의 단점은 너비가 반드시 이 태그에 대한 지원 여부는 알 수 없습니다.

코드 복사

코드는 다음과 같습니다.