meta가 이동단에서의 운용

name: 이 속성은 문서 레벨 메타데이터의 이름을 정의합니다.웹 내용에 대응하여 검색엔진이 분류, 예를 들어 키워드,description을 찾을 수 있도록 합니다.브라우저 제조업체가 사용자 정의한meta, 예를 들어viewport를 사용할 수도 있다.
1.http-equiv:
이 매거의 속성 정의는 서버와 사용자 에이전트의 컴파일을 변경할 수 있습니다.컴파일된 값은 콘텐츠의 내용을 가져옵니다.간단하게 말하면 HTTP 프로토콜 응답 헤더를 시뮬레이션할 수 있다.
가장 흔히 볼 수 있는 것은 아마도 Content-Type에 속할 것이다. 인코딩 유형을 설정한다.... 와 같다

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

H5에서

<meta charset="utf-8">

http-equiv는 흔히 볼 수 있는 또 다른 것이 다음과 같다.

Content-Language :  
Refresh :  
set-cookie :   cookie  
last-modified :  
expires :   cache  
cache-control :  
...

2.viewport

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" 
name="viewport">

width -//viewport 너비 (200 ~ 10000, 기본 980 픽셀)
height -//viewport 높이 (223 ~ 10000 범위)
initial-scale -//초기 배율 (범위는 >0에서 10까지)
minimum-scale -//사용자가 축소할 수 있는 최소 비율
maximum-scale -//사용자가 축소할 수 있는 최대 비율
user-scalable -//사용자가 수동으로 축소할 수 있는지 (no, yes)
3.format-detection

<meta name="format-detection" content="telphone=no" />

번호를 전화번호로 변경할지 설정: IOS 개인 속성
1.apple-mobile-web-app-capable
웹 앱 모드를 사용하면 도구막대와 메뉴 표시줄, 전역 탐색, 기타 사용을 숨깁니다.

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

2.apple-mobile-web-app-status-bar-style
IOS에서 Safari 최상위 상태 막대 스타일 설정하기

default( ， ) | black( ) | black-translucent( )

참고: "Black-translucent"값이 페이지 위치를 차지하고 페이지 위에 떠 있습니다. (페이지 20px 높이를 덮어쓰고 Retina 화면은 40px입니다.)
3.apple-touch-icon
메인 화면에 아이콘 파일 경로를 지정하기;

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

기본 아이폰 크기는 60px, 아이패드는 76px,retina스크린 곱하기 2입니다.
정합성 보장 치수 아이콘이 없으면 권장 치수보다 크지만 권장 치수에 가장 가까운 아이콘이 우선적으로 선택됩니다.
ios7 이전 시스템은 기본적으로 아이콘에 필터 (원각 및 고광) 를 추가했습니다. 시스템에 필터를 추가하지 않으려면 apple-touch-icon-precomposed를 사용할 수 있습니다.png이 apple-touch-icon을 대체합니다.png
4.apple-touch-startup-image
웹 앱에서 시작할 때의 인터페이스 설정하기;

<link rel="apple-touch-startup-image" href="/startup.png" />

size 속성이 지원되지 않습니다. 미디어query를 사용하여 제어할 수 있습니다.아이폰과 터치에서 그림 크기는 230*480px이고 세로만 지원됩니다.기타 meta

<!--  360 (webkit) -->
<meta name="renderer" content="webkit">
<!--  IE  -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--  ， viewport ，  -->
<meta name="HandheldFriendly" content="true">
<!--   -->
<meta name="MobileOptimized" content="320">
<!-- uc  -->
<meta name="screen-orientation" content="portrait">
<!-- QQ  -->
<meta name="x5-orientation" content="portrait">
<!-- UC  -->
<meta name="full-screen" content="yes">
<!-- QQ  -->
<meta name="x5-fullscreen" content="true">
<!-- UC  -->
<meta name="browsermode" content="application">
<!-- QQ  -->
<meta name="x5-page-mode" content="app">
<!-- windows phone   -->
<meta name="msapplication-tap-highlight" content="no">

따라서 일반적으로 새 페이지를 만들 때 다음과 같은 구조를 사용하고 자신의 실제 수요에 따라 필요한 것을 추가하면 된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection"content="telephone=no" />
<title>Demo</title>
</head>
<body>
<!-- code here -->
</body>
</html>

위 내용http://www.tuicool.com/articles/NnQFRv

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

meta가 이동단에서의 운용

name: 이 속성은 문서 레벨 메타데이터의 이름을 정의합니다.웹 내용에 대응하여 검색엔진이 분류, 예를 들어 키워드,description을 찾을 수 있도록 합니다.브라우저 제조업체가 사용자 정의한meta, 예를 들...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

meta가 이동단에서의 운용

좋은 웹페이지 즐겨찾기