meta가 이동단에서의 운용
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 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
elasticsearchnested 삽입 대상 전체 텍스트 검색 및 정렬ES Nested 중첩 유형은 무엇입니까?Elasticsearch에는 다음과 같은 다양한 데이터 유형이 있습니다. 기본 데이터 형식:string 형식.ES 7.x에서string 형식은:text와 키워드로 업그레이드됩...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
