>  기사  >  웹 프론트엔드  >  html 모바일 헤드 태그 및 메타 태그에 대한 자세한 설명

html 모바일 헤드 태그 및 메타 태그에 대한 자세한 설명

黄舟
黄舟원래의
2017-06-29 13:22:41980검색

대소문자를 구분하지 않는 HTML5 doctype 사용

<!DOCTYPE html>

더 많은 표준 언어 속성쓰기

<html lang="zh-cmn-Hans">

meta

문서에 사용된 문자 인코딩 선언

<meta charset=&#39;utf-8&#39;>

최신 버전의 IE 및 Chrome 선호

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

페이지 설명

<meta name="description" content="不超过150个字符"/>

페이지 키워드

<meta name="keywords" content=""/>

웹 작성자

<meta name="author" content="name, email@gmail.com"/>

Search엔진 크롤링

<meta name="robots" content="index,follow"/>

추가 viewport

<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

iOS 장치

홈 화면에 추가한 후 제목(i OS 6 추가 )

<meta name="apple-mobile-web-app-title" content="标题">

WebApp 전체 화면 모드 활성화 여부, 제거Apple의 기본 도구 모음 및 메뉴 표시줄

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

스마트 앱 광고 배너 추가 스마트 앱 배너(iOS 6+ Safari)

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

설정 Apple 도구 모음 색상

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

전화 통화로 식별되는 페이지의 번호 무시, 이메일 식별 무시

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

360 브라우저 속도 모드 활성화(웹킷)

<meta name="renderer" content="webkit">

호환 모드를 사용하는 IE 방지

<meta http-equiv="X-UA-Compatible" content="IE=edge">

주로 휴대용 기기에 최적화 BlackBerry와 같은 뷰포트를 인식하지 못하는 일부 오래된 브라우저의 경우

<meta name="HandheldFriendly" content="true">

Microsoft의 이전 브라우저

<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 force 전체 스크린


r
<meta name="x5-fullscreen" content="true">

uc 응용 프로그램 모드 모드

<meta name="browsermode" content="application">

qq 애플리케이션 모드 Moder는 폰 클릭없이 클릭

<meta name="msapplication-tap-highlight" content="no">

ios icon


iphone and itouch, 기본 57x57 픽셀, 반드시

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
iPhone 및 Retina가 있어야합니다. iTouch, 114x114픽셀은 없어도 사용할 수 있지만 권장됩니다. 비율)

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>


iPad 세로 1536x2008(Retina)

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>


iPad 가로 1024x748(표준 해상도)

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>

iPad 가로 2048x1496(Retina) 으르르르르

iPhone/ iPod Touch 세로 화면 320x480(표준 해상도)

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>


iPhone/iPod Touch 세로 화면 640x960(Retina)

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>


iPhone 5/iPod Touch 5 세로 화면 640x1136(Retina)

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>

iOS 기기 끝

Windows 8 타일 색상

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>

Windows 8 타일 아이콘

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>

RSS 구독 추가

<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>

파비콘 아이콘 추가

 <meta name="msapplication-TileColor" content="#000"/>

제목

<meta name="msapplication-TileImage" content="icon.png"/>

위 내용은 html 모바일 헤드 태그 및 메타 태그에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.