HTML 모바일 단말기 - 새로운 빈 페이지의 각 메타태그에 대한 자세한 설명-HTML 튜토리얼-php.cn

<!DOCTYPE html>
<html>
<head>    
<meta charset="UTF-8">    
<title>Document</title></head><body></body></html>

로그인 후 복사

meta tag

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />

로그인 후 복사

viewport

뷰 윈도우, 모바일 전용 태그입니다. 일반적으로 다음 코드를 사용할 수 있습니다.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

로그인 후 복사

위 코드는 너비가 장치의 너비로 설정되어 있음을 나타냅니다. 기본값은 크기 조정이 아니며 사용자는 확대/축소할 수 없습니다(즉, 크기 조정이 금지됩니다). ), 웹 페이지가 로드될 때 주소 표시줄과 탐색 표시줄이 숨겨집니다(ios7 .1 신규).

width – // [pixel_value | device-width] viewport 的宽度，范围从 200 到 10,000，默认为 980 像素
height – // [pixel_value | device-height ] viewport 的高度，范围从 223 到 10,000 
initial-scale – // float_value，初始的缩放比例 （范围从 > 0 到 10）
minimum-scale – // float_value，允许用户缩放到的最小比例
maximum-scale – // float_value，允许用户缩放到的最大比例
user-scalable – // [yes | no] 用户是否可以手动缩放
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目标屏幕像素密度

로그인 후 복사

참고: target-densitydpi 화면 픽셀 밀도는 스케일링과 관련이 있습니다. 이 데모를 수정하여 휴대폰에서 실제 효과를 확인할 수 있습니다. 나는 일반적으로 이 속성을 설정하지 않습니다.

apple-mobile-web-app-capable

웹앱 기능 활성화 여부에 따라 기본 Apple 툴바와 메뉴바가 삭제됩니다.

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

로그인 후 복사

apple-mobile-web-app-status-bar-style

웹앱 기능이 시작되면 휴대폰 신호, 시간, 배터리를 표시하는 상단 탐색 표시줄의 색상입니다. 기본값은 기본값(흰색)이며, 검정(검은색), 검정-반투명(회색 반투명)으로 설정할 수 있습니다. 주로 실제 페이지 디자인의 메인 컬러 매칭을 기준으로 설정됩니다.

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

로그인 후 복사

참고: apple-mobile-web-app-capable 및 apple-mobile-web-app-status-bar-style을 잘 이해하지 못한다면, 확인하실 수 있습니다. 아래의 세 번째 참조 기사에는 스크린샷 지침이 있습니다. apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style不太理解，可查阅下面的参考资料第三篇文章，里面有截图说明。

telephone & email

忽略页面中的数字识别为电话号码

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

로그인 후 복사

同样还有一个email识别

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

로그인 후 복사

当然两者可以写在一起

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

로그인 후 복사

其他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">

로그인 후 복사

参考资料：

Supported Meta Tags section of the Safari HTML Reference
移动前端工作的那些事---前端制作篇之meta标签篇
移动平台的meta标签-----神奇的功效
WebApp之Meta标签

link标签

apple-touch-icon

如果apple-mobile-web-app-capable设置为yes了，那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。而通过设置相应apple-touch-icon标签，则添加到主屏上的图标就会使用我们指定的图片。

以下是针对ox不同设备，选择一个最优icon。默认iphone的大小为60px，ipad为76px，retina屏乘以2倍。

<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">

로그인 후 복사

ios7以前系统默认会对图标添加特效（圆角及高光），如果不希望系统添加特效，则可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png

图标使用的优先级如下：

如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。
如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。
如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。

如果未在区域指定用link标签指定图标，会自动搜索网站根目录下以apple-touch-icon为前缀的png图标。

注：ios7不再为icon添加特效，ios7以前则默认为icon添加特效，除非icon有关键字-precomposed.png为后缀。

参考资料：

Specifying a Webpage Icon for Web Clip
WebApp之 apple-touch-icon
http://taylor.fausak.me/2013/11/01/ios-7-web-apps/

apple-touch-startup-image

同样基于apple-mobile-web-app-capable设置为yes，可以用WebApp设置一个类似NativeApp的启动画面。

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

로그인 후 복사

和apple-touch-icon不同，apple-mobile-web-app-capable

전화&이메일

페이지에서 전화번호로 인식되는 숫자는 무시하세요

// iPhone<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />

// iPhone Retina<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

// iPhone 5<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">

// iPad portrait<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />

// iPad landscape<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />

// iPad Retina portrait<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

// iPad Retina landscape<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

로그인 후 복사

이메일 인식도 있어요🎜

    
    
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />    
<meta name="apple-mobile-web-app-capable" content="yes" />    
<meta name="apple-mobile-web-app-status-bar-style" content="black" />    
    
Document

로그인 후 복사

🎜물론 둘을 같이 쓸 수도 있어요🎜rrreee🎜기타 메타🎜rrreee🎜참고자료:🎜

🎜 Safari HTML 참조의 지원되는 메타 태그 섹션🎜
🎜 모바일 프런트엔드 작업에 관한 사항---프론트엔드 제작 메타 tagged🎜 li>
🎜 모바일 플랫폼의 메타태그------마법의 효과🎜
🎜 WebApp의 메타태그🎜

🎜link tag🎜🎜apple -touch- icon🎜🎜apple-mobile-web-app-capable이 yes로 설정된 경우 홈 화면에 추가 버튼을 사용하여 웹사이트를 추가할 수 있습니다. iPhone, iPad, iTouch의 Safari 홈 화면에 추가. 해당 apple-touch-icon 태그를 설정하면 홈 화면에 추가된 아이콘이 이미지. 🎜🎜다음은 다양한 ox 기기에 가장 적합한 아이콘을 선택하는 것입니다. iPhone의 기본 크기는 60px, iPad는 76px이며 Retina 화면은 2배로 늘어납니다. 🎜rrreee🎜ios7 이전에는 시스템이 기본적으로 아이콘에 특수 효과(둥근 모서리 및 하이라이트)를 추가했습니다. 시스템이 특수 효과를 추가하는 것을 원하지 않으면 apple-touch-icon-precomposed.png를 사용할 수 있습니다. 대신 apple -touch-icon.png🎜🎜 아이콘이 사용하는 우선순위는 다음과 같습니다. 🎜

🎜 해당 기기의 권장 크기에 맞는 아이콘이 없는 경우, 해당 아이콘은 권장 크기보다 크지만 권장 크기에 가장 가까운 것이 먼저 사용됩니다. 🎜
🎜 권장 크기보다 큰 아이콘이 없을 경우 권장 크기에 가장 가까운 아이콘이 우선적으로 적용됩니다. 🎜
🎜 권장 크기에 맞는 아이콘이 여러 개인 경우 미리 구성된 키워드가 포함된 아이콘이 먼저 선택됩니다. 🎜

🎜해당 영역의 링크 태그를 사용하여 아이콘을 지정하지 않으면 자동으로 웹사이트 루트 디렉토리에서 apple-touch-icon 접두사가 붙은 png 아이콘을 검색하세요. 🎜🎜참고: ios7에서는 더 이상 아이콘에 특수 효과를 추가하지 않습니다. ios7 이전에는 아이콘에 접미사로 -precomposed.png 키워드가 없으면 기본적으로 특수 효과가 아이콘에 추가되었습니다. 🎜🎜참조: 🎜

🎜 Web Clip용 웹페이지 아이콘 지정🎜
🎜 WebApp용 apple-touch-icon🎜

🎜apple-touch-startup-image🎜🎜기반apple-mobile-web-app-capable이 yes로 설정된 경우 WebApp을 사용하여 NativeApp과 유사한 시작 화면을 설정할 수 있습니다. 🎜rrreee🎜 apple-touch-icon과 달리 apple-mobile-web-app-capable은 크기 속성을 지원하지 않으므로 미디어를 사용하여 레티나 로딩을 제어하는 것은 수평 및 수직 화면 로딩. 🎜rrreee🎜요약🎜🎜빈 페이지 템플릿을 만든 다음 특정 상황에 따라 apple-touch-icon 및 apple-touch-startup-image를 추가하세요🎜rrreee

위 내용은 HTML 모바일 단말기 - 새로운 빈 페이지의 각 메타태그에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!