首页 > 代码库 > HTML5移动开发中的meta与link

HTML5移动开发中的meta与link

2024-08-18 14:34:14   218人阅读

meta

HTML5移动开发中的一些webkit专属头部标签，能够帮助浏览器更好的解析HTML代码，从而为HTML5移动开发提供更好的前端表现与体验

 

viewport网页缩放

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

UTF-8编码

1
<meta charset="utf-8" />

SEO搜索引擎相关设置

1
2
3
4
5
6
7
8
<!-- 作者 -->
<meta name="author" contect="..." />
<!-- 关键词 -->
<meta name="keywords" content="..." />
<!-- 描述 -->
<meta name="description" content="..." />
<!-- 抓取 -->
<meta name="robots" content="..." />

iOS系统相关设置

1
2
3
4
<!-- 禁用自动识别电话号码 -->
<meta name="format-detection" content="telephone=no" />
<!-- 禁用自动识别电子邮件 -->
<meta name="format-detection" content="email=no" />

Safari浏览器相关设置

1
2
3
4
5
6
<!-- 强制全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置状态栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 设置添加至主屏标题 -->
<meta name="apple-mobile-web-app-title" content="..." />

UC浏览器相关设置

1
2
3
4
5
6
<!-- 强制竖屏 -->
<meta name="screen-orientation" content="portrait" />
<!-- 强制全屏 -->
<meta name="full-screen" content="yes" />
<!-- 应用模式 -->
<meta name="browsermode" content="application" />

QQ浏览器相关设置

1
2
3
4
5
6
<!-- 强制竖屏 -->
<meta name="x5-orientation" content="portrait" />
<!-- 强制全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- 应用模式 -->
<meta name="x5-page-mode" content="app" />

360浏览器相关设置

1
2
<!-- 启用极速模式 -->
<meta name="renderer" content="webkit" />

WP手机相关设置

1
2
<!-- 禁用点击高光效果 -->
<meta name="msapplication-tap-highlight" content="no" />

Weibo社交标签相关设置

1
2
3
4
5
6
7
8
9
10
<!-- 展示标题 -->
<meta property="og:title" content="..." />
<!-- 展示描述 -->
<meta property="og:description" content="..." />
<!-- 展示类型 -->
<meta property="og:type" content="..." />
<!-- 展示图片 -->
<meta property="og:image" content="..." />
<!-- 展示链接 -->
<meta property="og:url" content="..." />

 

link

让你的WebAPP看上去更像NativeAPP，带来不一样的用户体验

RSS订阅

1
<link rel="alternate" type="application/rss+xml" href=http://www.mamicode.com/"rss.xml" title="RSS" />

主屏图标相关设置

1
2
3
4
5
6
7
8
9
10
<!-- Favicons -->
<link rel="shortcut icon" type="image/ico" href=http://www.mamicode.com/"../images/favicon.ico" />
<!-- Android -->
<link rel="icon" sizes="196x196" href=http://www.mamicode.com/"../images/icon-196x196.png" />
<!-- iPhone、iTouch -->
<link rel="apple-touch-icon-precomposed" href=http://www.mamicode.com/"../images/icon-57x57.png" />
<!-- Retina iPhone、Retina iTouch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href=http://www.mamicode.com/"../images/icon-114x114.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href=http://www.mamicode.com/"../images/icon-144x144.png" />

iOS启动动画相关设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- iPhone、iPod Touch竖屏 -->
<link rel="apple-touch-startup-image" href=http://www.mamicode.com/"../images/icon-320x480.png" />
<!-- Retina iPhone、Retina iPod Touch竖屏 -->
<link rel="apple-touch-startup-image" sizes="640x960" href=http://www.mamicode.com/"../images/icon-640x960.png" />
<!-- Retina iPhone 5、Retina iPod Touch 5竖屏 -->
<link rel="apple-touch-startup-image" sizes="640x1136" href=http://www.mamicode.com/"../images/icon-640x1136.png" />
<!-- iPad竖屏 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href=http://www.mamicode.com/"../images/icon-768x1004.png" />
<!-- iPad横屏 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href=http://www.mamicode.com/"../images/icon-1024x748.png" />
<!-- Retina iPad竖屏 -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href=http://www.mamicode.com/"../images/icon-1536x2008.png" />
<!-- Retina iPad横屏 -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href=http://www.mamicode.com/"../images/icon-2048x1496.png" />

 

关于meta与link的设置项其实还有不少，由于太过冷门，就不一一列举了

HTML5移动开发中的meta与link


联系
我们