下面分享一下移动端常见的<meta>功能。
代码实例如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
<!-- 声明文档使用的字符编码 -->
<
meta
charset
=
'utf-8'
>
<!-- 优先使用 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, <a href="
mailto:email@gmail.com">email@gmail.com</
a
>"/>
<!-- 搜索引擎抓取 -->
<
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 全屏模式打开页面时出现黑边-->
<!-- iOS 设备 begin -->
<
meta
name
=
"apple-mobile-web-app-title"
content
=
"标题"
>
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<
meta
name
=
"apple-mobile-web-app-capable"
content
=
"yes"
/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<
meta
name
=
"apple-itunes-app"
content
=
"app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"
>
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<
meta
name
=
"apple-mobile-web-app-status-bar-style"
content
=
"black"
/>
<!-- 设置苹果工具栏颜色 -->
<
meta
name
=
"format-detection"
content
=
"telphone=no, email=no"
/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<
meta
name
=
"renderer"
content
=
"webkit"
>
<!-- 避免IE使用兼容模式 -->
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<!-- 不让百度转码 -->
<
meta
http-equiv
=
"Cache-Control"
content
=
"no-siteapp"
/>
<!-- 针对手持设备优化，主要是针对一些老的不识别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"
>
<!-- iOS 图标 begin -->
<
link
rel
=
"apple-touch-icon-precomposed"
href
=
"/apple-touch-icon-57x57-precomposed.png"
/>
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<
link
rel
=
"apple-touch-icon-precomposed"
sizes
=
"114x114"
href
=
"/apple-touch-icon-114x114-precomposed.png"
/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<
link
rel
=
"apple-touch-icon-precomposed"
sizes
=
"144x144"
href
=
"/apple-touch-icon-144x144-precomposed.png"
/>
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<!-- iOS 图标 end -->
<!-- iOS 启动画面 begin -->
<
link
rel
=
"apple-touch-startup-image"
sizes
=
"768x1004"
href
=
"/splash-screen-768x1004.png"
/>
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<
link
rel
=
"apple-touch-startup-image"
sizes
=
"1536x2008"
href
=
"/splash-screen-1536x2008.png"
/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<
link
rel
=
"apple-touch-startup-image"
sizes
=
"1024x748"
href
=
"/Default-Portrait-1024x748.png"
/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<
link
rel
=
"apple-touch-startup-image"
sizes
=
"2048x1496"
href
=
"/splash-screen-2048x1496.png"
/>
<!-- iPad 横屏 2048x1496（Retina） -->
<
link
rel
=
"apple-touch-startup-image"
href
=
"/splash-screen-320x480.png"
/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<
link
rel
=
"apple-touch-startup-image"
sizes
=
"640x960"
href
=
"/splash-screen-640x960.png"
/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<
link
rel
=
"apple-touch-startup-image"
sizes
=
"640x1136"
href
=
"/splash-screen-640x1136.png"
/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS 启动画面 end -->
<!-- iOS 设备 end -->
<
meta
name
=
"msapplication-TileColor"
content
=
"#000"
/>
<!-- Windows 8 磁贴颜色 -->
<
meta
name
=
"msapplication-TileImage"
content
=
"icon.png"
/>
<!-- Windows 8 磁贴图标 -->
<
link
rel
=
"alternate"
type
=
"application/rss+xml"
title
=
"RSS"
href
=
"/rss.xml"
/>
<!-- 添加 RSS 订阅 -->
<
link
rel
=
"shortcut icon"
type
=
"image/ico"
href
=
"/favicon.ico"
/>
<!-- 添加 favicon icon -->
<!-- sns 社交标签 begin -->
<!-- 参考微博API -->
<
meta
property
=
"og:type"
content
=
"类型"
/>
<
meta
property
=
"og:url"
content
=
"URL地址"
/>
<
meta
property
=
"og:title"
content
=
"标题"
/>
<
meta
property
=
"og:image"
content
=
"图片"
/>
<
meta
property
=
"og:description"
content
=
"描述"
/>
<!-- sns 社交标签 end -->
|
原文发布时间为：2017-2-19
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
原文链接：移动端<meta>标签功能
微信关注我们
转载内容版权归作者及来源网站所有！
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。
马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。
Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。
Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。
扫码在手机上查看文章
扫描二维码，手机阅读更方便
有任何问题或合作意向欢迎联系我们
Email: 99873273@qq.com
QQ: 99873273