blog icon indicating copy to clipboard operation
blog copied to clipboard

Published 20 hours ago • verified publisher icon yisibl

常用的 HTML 头部标签

Open yisibl opened this issue 10 years ago • 50 comments

曾几何时，我们已经不再手写 HTML 标签。Emmet、Markdown 等工具让我们「健步如飞」，但是我们真的了解这些标签了吗？本文着重介绍一些我们容易忽视和用错的头部标签，特别是 iOS 等针对移动设备的一些标签。这是一篇非常基础的标签索引，其中 iOS 设备部分对设计师也有参考作用。

如果是快速开发，可以直接到 Gist 复制代码：https://gist.github.com/yisibl/7985401

以下是正文部分：

基本标签

  • 使用 HTML5 doctype，不区分大小写。

    <!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->

  • 声明文档使用的字符编码

    <meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->

  • 更加标准的 lang 属性写法 http://zhi.hu/XyIa

    • 简体中文

      <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->

    • 繁体中文

      <html lang="zh-cmn-Hant"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->

    很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：

    <p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">菠萝</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong lang="zh-cmn-Hans-SG">黄梨</strong>。
</p>

  • 优先使用 IE 最新版本和 Chrome

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 优先使用 IE 最新版本和 Chrome -->

SEO 优化

  • 页面描述

    每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。文档

    <meta name="description" content="不超过150个字符"> <!-- 页面描述 -->

  • 页面关键词

    <meta name="keywords" content=""> <!-- 页面关键词 -->

  • 定义页面标题

    <title>标题</title>

  • 定义网页作者

    <meta name="author" content="name, [email protected]"> <!-- 网页作者 -->

  • 定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。文档

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

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz

content 参数：

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)
  • minimal-ui _iOS 7.1 beta 2_ 中新增属性（_注意：iOS8 中已经删除_），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 设备

  1. 添加到主屏后的标题（iOS 6 新增）

    <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->

  2. 是否启用 WebApp 全屏模式

    <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 是否启用 WebApp 全屏模式 -->

  3. 设置状态栏的背景颜色

    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->

    只有在 "apple-mobile-web-app-capable" content="yes" 时生效

    content 参数：

    • default 默认值。
    • black 状态栏背景是黑色。
    • black-translucent 状态栏背景是黑色半透明。

    如果设置为 default 或 black ,网页内容从状态栏底部开始。

    如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

  4. 禁止数字自动识别为电话号码

    <meta name="format-detection" content="telephone=no"> <!-- 禁止数字识自动别为电话号码 -->

  5. 禁止自动自动识别地址

    <meta name="format-detection" content="address=no"> <!-- 禁止自动自动识别地址 -->

  6. 禁止自动自动识别日期

    <meta name="format-detection" content="date=no">  <!-- 禁止自动自动识别日期 -->

  7. 禁止自动自动识别 Email

    <meta name="format-detection" content="email=no">  <!-- 禁止自动自动识别 Email -->

  8. iOS 图标

    rel 参数：

    apple-touch-icon 图片自动处理成圆角和高光等效果。

    apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。

    • iPhone 和 iTouch，默认 57x57 像素，必须有

      <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->

    • iPad，72x72 像素，可以没有，但推荐有

      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"> <!-- iPad，72x72 像素，可以没有，但推荐有 -->

    • Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

      <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->

    • Retina iPad，144x144 像素，可以没有，但推荐有

      <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->

  9. iOS 启动画面

    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html

    参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

    • iPad 的启动画面是不包括状态栏区域的。

      • iPad 竖屏 768 x 1004（标准分辨率） 
      <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"> <!-- iPad 竖屏 768 x 1004（标准分辨率） -->

      • iPad 竖屏 1536x2008（Retina）

        <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"> <!-- iPad 竖屏 1536x2008（Retina） -->

      • iPad 横屏 1024x748（标准分辨率）

        <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"> <!-- iPad 横屏 1024x748（标准分辨率） -->

      • iPad 横屏 2048x1496（Retina）

        <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"> <!-- iPad 横屏 2048x1496（Retina） -->

    • iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

      • iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

        <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->

      • iPhone/iPod Touch 竖屏 640x960 (Retina)

        <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->

      • iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

        <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->

  10. 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）文档

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。

  <meta name="theme-color" content="#db5945">

theme-color meta tag

Windows 8

  • Windows 8 磁贴颜色

    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->

  • Windows 8 磁贴图标

    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

360 浏览器

  • 设置 360 浏览器渲染模式

    webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。

    <meta name="renderer" content="webkit|ie-comp|ie-stand">

UC 浏览器

  • 设置屏幕方向

    portrait 为横屏，landscape 为竖屏。

    <meta name="screen-orientation" content="portrait|landscape">

  • 设置全屏

    <meta name="full-screen" content="yes">

  • 设置适应屏幕排版（缩放是否显示滚动条）

    UC 浏览器在标准排版效果实现的基础上，提供适应屏幕的排版方式，当设置为 uc-fitscreen=yes，页面进行缩放操作时，仅放大图片和文字等元素，但不放大屏幕宽度，保持不出现水平（横向）滚动条。

    <meta name="viewport" content="uc-fitscreen=no|yes">

  • 排版模式

    UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。

    <meta name="layoutmode" content="fitscreen|standard">

  • 夜间模式

    可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂，由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用)，因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式，自行设计更适合用户使用的夜间模式。

    注意：页面内的 frame/iframe 中的夜间模式的 meta 不生效。

    <meta name="nightmode" content="enable|disable">

  • 整页图片强制显示

    为了节省流量及加快速度，UC 为用户提供了无图模式，在实际使用中存在页面中的图片是不可缺少的，例如验证码，地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。

    **注意：整页图片强制显示仅对当前页面生效，对页面内的 frame/iframe 不生效，也不影响前进后退的页面

    <meta name="imagemode" content="force">

  • 开启应用模式

    应用模式是为方便 Web 应用及游戏开发者设置的综合开关，通过meta标签进行指示打开，当进入应用模式时，浏览器将自动调整以下参数:

    参数 状态 说明
    全屏 生效 可通过 meta 或 JS API 调用退出全屏
    长按菜单 失效 可通过 JS API 调用重新生效
    浏览器默认手势 失效 可通过 JS API 调用重新生效
    排版模式 标准模式 可通过 meta 或 JS API 调用设置其他排版模式
    强制图片显示 生效 /
    夜间模式 失效 可通过 meta 或 JS API 调用启用夜间模式 
    <meta name="browsermode" content="application">

QQ 浏览器（X5 内核）

  <!-- 设置横屏、竖屏显示，portrait 横屏，landscape 竖屏-->
  <meta name="x5-orientation" content="portrait|landscape">
  <!-- 设置全屏显示 -->
  <meta name="x5-fullscreen" content="true">
  <!-- 开启应用模式 -->
  <meta name="x5-page-mode" content="app">

其他

  • 添加 RSS 订阅

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"> <!-- 添加 RSS 订阅 -->

  • 添加 favicon icon

    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"> <!-- 添加 favicon icon -->

  • 禁止 Chrome 浏览器中自动提示翻译

    更多：http://www.w3.org/International/questions/qa-translate-flag

    <meta name="google" value="notranslate">

  • 禁止百度转码

    <meta http-equiv="Cache-Control" content="no-siteapp"><!-- 禁止百度转码 -->

更多

参阅：

yisibl avatar Dec 17 '13 09:12 yisibl

favicon小抄比较详细地介绍了favicon的用法。

bnuhero avatar Dec 17 '13 11:12 bnuhero

good 虽然是基础的，我缺的

GoToBoy avatar Dec 17 '13 12:12 GoToBoy

感觉讲meta的这三篇文章不错： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes http://wiki.whatwg.org/wiki/MetaExtensions http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013/

shawnXiao avatar Dec 17 '13 14:12 shawnXiao

chrome=1这个现在是否不再需要了？

hax avatar Dec 18 '13 10:12 hax

description不超过150字的出处在哪里？

hax avatar Dec 18 '13 10:12 hax

keywords应该怎么写？比如怎么分割？逗号？空格？

hax avatar Dec 18 '13 10:12 hax

网页作者 name和email逗号分割，这个出处在哪里？其他格式不行吗？

hax avatar Dec 18 '13 10:12 hax

viewport 参数，iOS 7新加了一个啥。还有android支持targetdpi啥的。

hax avatar Dec 18 '13 10:12 hax

更多里有点啥？挑点有用的说吧。

我常用的还有 link rel=canoncial

hax avatar Dec 18 '13 10:12 hax

mark

ghost avatar Dec 19 '13 17:12 ghost

@hax 新增的 minimal-ui https://github.com/yisibl/blog/issues/1#minimal-ui

yisibl avatar Dec 21 '13 15:12 yisibl

mark

antchen avatar Dec 25 '13 02:12 antchen

mark

rogueduola avatar Dec 26 '13 05:12 rogueduola

mark

wdxiake avatar Jan 06 '14 09:01 wdxiake

速速更新吧。一丝大美妞。

markyun avatar Jan 09 '14 17:01 markyun

@markyun 更新啥？~~~~(>_<)~~~~

yisibl avatar Jan 10 '14 08:01 yisibl

http://www.iyunlu.com/view 不能访问了。本来还想这几天想看上面的一些博文的。

clinx avatar Feb 14 '14 16:02 clinx

mark, 赞！

barretlee avatar Mar 14 '14 11:03 barretlee

mark

sgsheg avatar Apr 09 '14 00:04 sgsheg

mark 赞

paddingme avatar Aug 13 '14 13:08 paddingme

占位 http://0532.github.com

0532 avatar Sep 11 '14 09:09 0532

:+1:

tthallos avatar Oct 22 '14 02:10 tthallos

赞

lixuejiang avatar Oct 27 '14 09:10 lixuejiang

mark~~ very nice~~

zenoven avatar Oct 31 '14 06:10 zenoven

好文

alanerzhao avatar Nov 05 '14 06:11 alanerzhao

标记一下http://fex.baidu.com/blog/2014/10/html-head-tags/

fankangsong avatar Nov 11 '14 15:11 fankangsong

viewport miniui IOS 8已经被废弃了

litson avatar Nov 18 '14 05:11 litson

@litson 好的，感谢，已经更新正文。

yisibl avatar Nov 18 '14 09:11 yisibl

非常感谢~ 用上了`

wwek avatar Nov 20 '14 02:11 wwek

可以直接到 Gist 复制代码：https://gist.github.com/yisibl/7985401 链接打不开

firebaby avatar Dec 02 '14 08:12 firebaby

@firebaby 可能要翻墙。

yisibl avatar Dec 02 '14 08:12 yisibl

iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

这一栏里的图片尺寸都错了

经过测试正确的如下：

iPhone/iPod Touch 竖屏 320x460 (标准分辨率)

iPhone/iPod Touch 竖屏 640x920 (Retina)

iPhone 5/iPod Touch 5 竖屏 640x1096 (Retina)

leoxoocanada avatar Apr 24 '15 10:04 leoxoocanada

@gafish 感谢，待测试后修改。

yisibl avatar Apr 24 '15 11:04 yisibl

minimal-ui 已被删除

yisibl avatar Nov 13 '15 07:11 yisibl

minimal-ui 被删除的原因有 reference 吗？

hax avatar Nov 13 '15 08:11 hax

@hax 应该主要还是从用户体验角度考虑的，如果用户打开一个全屏的页面，不知道点击顶部可以出现工具栏，那么这个页面就没法关闭了。iOS 8 中改成向上滑动一段距离隐藏工具栏，快速下滑显示工具栏的体验会更好一些。

yisibl avatar Nov 13 '15 09:11 yisibl

:+1:

pobing avatar Jan 07 '16 06:01 pobing

「更加标准的 lang 属性写法」这一节的内容已经过时，请参考知乎上猎奇怪蜀黍的回答，在 IANA Language Subtag Registry 中，zh-cmn-Hans 已经被标记为 Deprecated 了：

%%
Type: redundant
Tag: zh-cmn-Hans
Description: Mandarin Chinese (Simplified)
Added: 2005-07-15
Deprecated: 2009-07-29
Preferred-Value: cmn-Hans

sodatea avatar Jan 07 '16 08:01 sodatea

@sodatea 使用 zh 前缀是为了兼容性。

hax avatar Jan 10 '16 07:01 hax

@hax 今天仔细阅读了下 BCP47，的确，zh-cmn-Hans 是对的……

不过您在知乎上的回答也有些疏漏，根据 BCP47 里的 Language Tag ABNF，zh 以及 zh-CN 是完全符合标准的，尤其是 4.1.2 节 特地拿了 zh-HK 作为例子表示标准是兼容这种习惯用法的。

而且后者在实际使用中也确实有对应的使用场景。比如，香港的网络论坛中，帖子内容很有可能是 cmn-Hant-HK 和 yue-Hant-HK 的混合，在没办法逐字加语言标记的情况下，网站只能取两者的公共子集 zh-HK 了。

sodatea avatar Jan 13 '16 07:01 sodatea

我描述的是我推荐的用法。

zh-CN 的问题是，过去标记为 zh-CN 的，实际上99.99%是想表达 zh-Hans。真正需要用 zh-CN 标记的场合完全没有。

4.1.2节的意思是为了兼容性，可以继续用 zh-HK 表达 yue。但是这不等于鼓励你继续用它。实际上你应该用 yue。我认为 BCP47 在这点上也写得不够好。（毕竟是老外写的，国人参与标准讨论恐怕很少。）因为 zh-HK 比 zh-CN 更麻烦点，过去标记为 zh-HK 的，70%是想表达 yue，但还有30%是想表达 zh-Hant（当然这百分比是我拍脑袋得出的，了解意思就好）。

对于你讲的场景，实际上 UGC 是没法标记语言的，除非作者自己给你标。（显然普通用户是不可能的。）比如，香港网络论坛也可能包含内容是英语的帖子，或者完全是用简体书写的文字。

所以一般网页上的 lang tag 表示的是网页自身 UI 是什么语言。那么通常可以明确是 zh-cmn-Hant。

即使你真的想表示这个香港本地论坛 UGC 的主流语言，使用 zh-Hant-HK 也比 zh-HK 好。因为当你使用 zh-HK 时我们根本不清楚你是在哪个意义上使用的（因此通常应用就猜你的意思实际是 yue）。

hax avatar Jan 13 '16 09:01 hax

+1

WangXiaoJin avatar Mar 04 '16 07:03 WangXiaoJin

+1

xbzhs avatar May 04 '16 03:05 xbzhs

+2

zchuhui avatar Jun 29 '16 05:06 zchuhui

mark

raly avatar Mar 24 '17 08:03 raly

不手写HTML标签？

noobalex avatar May 19 '17 14:05 noobalex

棒👍

liu12fei08fei avatar Jan 14 '18 19:01 liu12fei08fei

mark

wfzong avatar Apr 09 '18 07:04 wfzong

none yet

danffer2019 avatar Dec 27 '19 14:12 danffer2019

曾几何时，我们已经不再手写 HTML 标签。Emmet、Markdown 等工具让我们「健步如飞」，但是我们真的了解这些标签了吗？本文着重介绍一些我们容易忽视和用错的头部标签，特别是 iOS 等针对移动设备的一些标签。这是一篇非常基础的标签索引，其中 iOS 设备部分对设计师也有参考作用。

如果是快速开发，可以直接到 Gist 复制代码：https://gist.github.com/yisibl/7985401

以下是正文部分：

基本标签

  • 使用 HTML5 doctype，不区分大小写。

    <!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->

  • 声明文档使用的字符编码

    <meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->

  • 更加标准的 lang 属性写法 http://zhi.hu/XyIa

    • 简体中文 
      <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
    • 繁体中文 
      <html lang="zh-cmn-Hant"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->

    很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：

    <p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">菠萝</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong lang="zh-cmn-Hans-SG">黄梨</strong>。
</p>

  • 优先使用 IE 最新版本和 Chrome

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 优先使用 IE 最新版本和 Chrome -->

SEO 优化

  • 页面描述 每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。文档 
    <meta name="description" content="不超过150个字符"> <!-- 页面描述 -->
  • 页面关键词 
    <meta name="keywords" content=""> <!-- 页面关键词 -->
  • 定义页面标题 
    <title>标题</title>
  • 定义网页作者 
    <meta name="author" content="name, [email protected]"> <!-- 网页作者 -->
  • 定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。文档 
    <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 -->

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz

content 参数：

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)
  • minimal-ui _iOS 7.1 beta 2_ 中新增属性（_注意：iOS8 中已经删除_），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 设备

  • 添加到主屏后的标题（iOS 6 新增） <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） --> * 是否启用 WebApp 全屏模式 <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 是否启用 WebApp 全屏模式 --> * 设置状态栏的背景颜色 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 --> 只有在 "apple-mobile-web-app-capable" content="yes" 时生效 content 参数： * default 默认值。 * black 状态栏背景是黑色。 * black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。 * 禁止数字自动识别为电话号码 <meta name="format-detection" content="telephone=no"> <!-- 禁止数字识自动别为电话号码 --> * 禁止自动自动识别地址 <meta name="format-detection" content="address=no"> <!-- 禁止自动自动识别地址 --> * 禁止自动自动识别日期 <meta name="format-detection" content="date=no"> <!-- 禁止自动自动识别日期 --> * 禁止自动自动识别 Email <meta name="format-detection" content="email=no"> <!-- 禁止自动自动识别 Email --> * iOS 图标 rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 * iPhone 和 iTouch，默认 57x57 像素，必须有 <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --> * iPad，72x72 像素，可以没有，但推荐有 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"> <!-- iPad，72x72 像素，可以没有，但推荐有 --> * Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --> * Retina iPad，144x144 像素，可以没有，但推荐有 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->

  1. iOS 启动画面 官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html 参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

    • iPad 的启动画面是不包括状态栏区域的。

      • iPad 竖屏 768 x 1004（标准分辨率） 
      <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"> <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
      • iPad 竖屏 1536x2008（Retina） 
        <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"> <!-- iPad 竖屏 1536x2008（Retina） -->
      • iPad 横屏 1024x748（标准分辨率） 
        <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"> <!-- iPad 横屏 1024x748（标准分辨率） -->
      • iPad 横屏 2048x1496（Retina） 
        <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"> <!-- iPad 横屏 2048x1496（Retina） -->

    • iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

      • iPhone/iPod Touch 竖屏 320x480 (标准分辨率) 
        <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
      • iPhone/iPod Touch 竖屏 640x960 (Retina) 
        <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
      • iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) 
        <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->

  2. 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）文档

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。

  <meta name="theme-color" content="#db5945">

theme-color meta tag

Windows 8

  • Windows 8 磁贴颜色 
    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
  • Windows 8 磁贴图标 
    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

360 浏览器

  • 设置 360 浏览器渲染模式 webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。 
    <meta name="renderer" content="webkit|ie-comp|ie-stand">

UC 浏览器

  • 设置屏幕方向 portrait 为横屏，landscape 为竖屏。

    <meta name="screen-orientation" content="portrait|landscape">

  • 设置全屏

    <meta name="full-screen" content="yes">

  • 设置适应屏幕排版（缩放是否显示滚动条） UC 浏览器在标准排版效果实现的基础上，提供适应屏幕的排版方式，当设置为 uc-fitscreen=yes，页面进行缩放操作时，仅放大图片和文字等元素，但不放大屏幕宽度，保持不出现水平（横向）滚动条。

    <meta name="viewport" content="uc-fitscreen=no|yes">

  • 排版模式 UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。

    <meta name="layoutmode" content="fitscreen|standard">

  • 夜间模式 可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂，由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用)，因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式，自行设计更适合用户使用的夜间模式。 注意：页面内的 frame/iframe 中的夜间模式的 meta 不生效。

    <meta name="nightmode" content="enable|disable">

  • 整页图片强制显示 为了节省流量及加快速度，UC 为用户提供了无图模式，在实际使用中存在页面中的图片是不可缺少的，例如验证码，地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。 **注意：整页图片强制显示仅对当前页面生效，对页面内的 frame/iframe 不生效，也不影响前进后退的页面

    <meta name="imagemode" content="force">

  • 开启应用模式 应用模式是为方便 Web 应用及游戏开发者设置的综合开关，通过meta标签进行指示打开，当进入应用模式时，浏览器将自动调整以下参数:

    参数 状态 说明

    全屏 生效 可通过 meta 或 JS API 调用退出全屏

    长按菜单 失效 可通过 JS API 调用重新生效

    浏览器默认手势 失效 可通过 JS API 调用重新生效

    排版模式 标准模式 可通过 meta 或 JS API 调用设置其他排版模式

    强制图片显示 生效 /

    夜间模式 失效 可通过 meta 或 JS API 调用启用夜间模式

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

QQ 浏览器（X5 内核）

  <!-- 设置横屏、竖屏显示，portrait 横屏，landscape 竖屏-->
  <meta name="x5-orientation" content="portrait|landscape">
  <!-- 设置全屏显示 -->
  <meta name="x5-fullscreen" content="true">
  <!-- 开启应用模式 -->
  <meta name="x5-page-mode" content="app">

其他

  • 添加 RSS 订阅 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"> <!-- 添加 RSS 订阅 -->
  • 添加 favicon icon 
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"> <!-- 添加 favicon icon -->
  • 禁止 Chrome 浏览器中自动提示翻译 更多：http://www.w3.org/International/questions/qa-translate-flag 
    <meta name="google" value="notranslate">
  • 禁止百度转码 
    <meta http-equiv="Cache-Control" content="no-siteapp"><!-- 禁止百度转码 -->

更多

参阅：

danffer2019 avatar Dec 27 '19 14:12 danffer2019