모바일 플랫폼 개발에 메타태그를 적용한 사례-HTML 튜토리얼-php.cn

모바일 플랫폼 개발에 메타태그를 적용한 사례

高洛峰

풀어 주다： 2017-03-03 16:21:44

원래의

1127명이 탐색했습니다.

이 글은 주로 모바일 플랫폼 개발에서 메타 태그의 상세한 적용을 소개합니다. 필요한 친구들이 참고하면 됩니다.

데스크탑 플랫폼 웹 레이아웃의 메타 태그는 누구나 익숙할 것입니다. head 요소 내부에 위치한 SEO 친구들은 메타에 대한 특별한 감정을 가지고 있을 것입니다. 오늘은 모바일 플랫폼의 메타 태그가 모바일 플랫폼에 어떤 마법적인 영향을 미치는지에 대해 이야기하겠습니다.

1. 메타의 뷰포트

모바일 플랫폼 메타태그에 관해 얘기하자면 뷰포트란 무엇일까요?
뷰포트는 데스크톱 브라우저의 경우 도구 모음, 상태 표시줄, 스크롤 막대 등을 모두 제거한 후 웹 페이지를 보는 데 사용되는 영역을 의미합니다.
기존 WEB 페이지의 경우 iPhone에서는 너비가 980으로 표시되는 것이 일반적이며 화면도 꽉 채웁니다. 그러나 웹앱의 경우에는 약간 문제가 될 수 있습니다. 세로 모드에서 100cm, 320페이지가 iPhone에 표시되는 효과는 무엇입니까? 아이폰은 가로가 320mm가 아니라 화면을 꽉 채워야 한다고 생각하는 분들도 계시겠지만 현실은 어떤가요? iPhone에서 다음 레이아웃의 디스플레이를 살펴보겠습니다.

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Viewport</title>
<style type="text/css">
p,body{
padding:0;
margin:0;
}
body{
padding-top:100px;
color:#fff;
}
p{
width:320px;
height:100px;
margin:0 auto;
background:#000;
text-align:center;
font:30px/100px Arial;
}
</style>
</head>
<body>
<p>
AppUE
</p>
</body>
</html>

로그인 후 복사

따라서 뷰포트를 변경해야 하며 다음과 같은 속성 값을 갖습니다. 설정:

width: 뷰포트 너비(범위 200~10,000, 기본값은 980픽셀)
height: 뷰포트 높이(범위 223~10,000)
initial- scale: 초기 배율(범위 >0 ~ 10)
minimum-scale: 사용자가 확대/축소할 수 있는 최소 배율
maximum-scale: 사용자가 확대/축소할 수 있는 최대 배율
사용자 확장 가능: 사용자가 수동으로 확대/축소할 수 있는지 여부

이러한 속성에 대해 하나 이상의 속성을 설정할 수 있으며 동시에 모두 설정할 필요는 없습니다. iPhone이 자동으로 계산합니다. 기본값을 직접 사용하는 대신 사용자가 설정한 속성을 기반으로 다른 속성 값을 사용합니다.

initial-scale=1로 설정하면 세로 모드에서는 너비와 높이가 자동으로 320*356(주소 표시줄 등이 모두 공간을 차지하므로 320*480이 아님), 가로 모드에서는 480*208이 됩니다. 모드. 마찬가지로 너비만 설정하면 초기 크기와 높이가 자동으로 계산됩니다. 예를 들어 width=320으로 설정하면 화면이 세로 모드일 때 초기 배율은 1이고 화면이 가로 모드일 때 1.5가 됩니다. 그렇다면 이러한 설정은 Safari에 어떻게 알릴까요? 실제로 다음과 같은 형식의 매우 간단한 메타입니다.

코드는 다음과 같습니다.

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

로그인 후 복사

자, 페이지를 더 이상 전체 화면으로 레이아웃할 수 없습니다. 페이지 디스플레이가 작을까봐 걱정해야 합니다.

2. 메타 형식 감지

코드는 다음과 같습니다.

<meta name=”format-detection” content=”telephone=no” />

로그인 후 복사

링크 스타일을 추가하지 않고 숫자열을 명확하게 작성했습니다. 하지만 iPhone은 자동으로 텍스트에 링크 스타일을 추가하고 이 번호를 클릭하면 자동으로 해당 번호로 전화가 걸립니다! 이 전화 접속 링크를 제거하는 방법은 무엇입니까? 이때 우리 메타는 다시 그 마법의 힘을 과시해야 합니다.

telephone=no는 전화 접속 링크로의 변환을 금지합니다!
telephone=yes를 사용하면 숫자를 전화 접속 링크로 변환할 수 있습니다. 변환 기능을 활성화하려면 이 메타를 작성할 필요가 없습니다. 기본적으로 활성화되어 있습니다.

3. apple-mobile-web-app 가능 메타

코드는 다음과 같습니다.

<meta name=”apple-mobile-web-app-capable” content=”yes” />

로그인 후 복사

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

4. Meta의 apple-mobile-web-app-status-bar-style

코드는 다음과 같습니다.

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />

로그인 후 복사

기능은

상태 표시줄의 표시 스타일을 제어하는 코드는 다음과 같습니다.

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

로그인 후 복사

모바일 플랫폼 개발에서 메타 태그를 적용한 더 많은 예시를 보려면 결제하세요. 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

모바일 플랫폼 개발에 메타태그를 적용한 사례