모바일 웹사이트를 만들 때 방문자가 볼 수 있는 페이지의 단순성과 쉬운 조작 등에 더해 메타태그 설정도 적절하게 설정하면 모바일의 검색 엔진 최적화가 향상됩니다. 웹사이트와 모바일 브라우저의 렌더링은 매우 유용합니다. 데스크탑 플랫폼의 웹 레이아웃에 있는 메타 태그는 모두가 잘 알고 있으며 항상 head 요소 안에 위치합니다. SEO를 하는 친구들은 메타에 대한 특별한 느낌을 가지고 있을 것입니다. 오늘은 모바일 플랫폼의 메타 태그에 대해 이야기하겠습니다. . 모바일 플랫폼에서 메타 태그의 마법 같은 효과는 무엇입니까?
1. 메타의 뷰포트
모바일 플랫폼 메타태그에 있어서 뷰포트란 무엇일까요?
뷰포트는 데스크톱 브라우저의 경우 도구 모음, 상태 표시줄, 스크롤 막대 등을 모두 제거한 후 웹 페이지를 보는 데 사용되는 영역을 의미합니다.
기존 WEB 페이지의 경우 iPhone에서는 너비가 980으로 표시되는 것이 일반적이며 화면도 꽉 채웁니다. 그러나 웹앱의 경우에는 약간 문제가 될 수 있습니다. 세로 모드에서 100cm, 320페이지가 iPhone에 표시되는 효과는 무엇입니까? 아이폰은 가로가 320mm가 아니라 화면을 꽉 채워야 한다고 생각하는 분들도 계시겠지만 현실은 어떤가요? iPhone에서 다음 레이아웃이 어떻게 나타나는지 살펴 보겠습니다
코드 복사
코드는 다음과 같습니다:
링크 스타일을 추가하지 않고 숫자열을 명확하게 썼는데, 아이폰은 자동으로 텍스트에 링크 스타일을 추가하고, 숫자를 클릭하면 자동으로 해당 번호로 전화가 걸립니다! 이 전화 접속 링크를 제거하는 방법은 무엇입니까? 이때 우리 메타는 다시 마법을 보여주어야 합니다.
telephone=no는 전화 접속 링크로의 변환을 금지합니다!
telephone=yes를 사용하면 숫자를 전화 접속 링크로 변환할 수 있습니다. 변환 기능을 활성화하려면 이 메타를 작성할 필요가 없습니다. 기본적으로 활성화되어 있습니다.
3. apple-mobile-web-app-capable의 메타
이 메타의 기능은 기본 Apple 도구 모음과 메뉴 표시줄을 삭제하는 것입니다. 콘텐츠에는 "yes"와 "no"라는 두 가지 값이 있습니다. 도구 모음과 메뉴 표시줄을 표시해야 하는 경우 이 메타 줄을 추가할 필요가 없습니다. 기본값은 표시하는 것입니다.
4. apple-mobile-web-app-status-bar 스타일의 메타
상태 표시줄 표시 스타일을 제어하는 기능입니다
MobileOptimized
이것은 결국 모바일 콘텐츠를 식별하는 또 다른 방법이 된 Windows 전용 메타 태그이지만 이 태그의 단점은 너비가 반드시 이 태그에 대한 지원 여부는 알 수 없습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
