🙈本文正在施工中，请保持关注。🙈

Unicode 中将字符分为了七大类，其中大写的 P 表示标点符号，具体的分类如下：

然后每个大的分类下面进一步细分，本文涉及到的标点符号具体的含义如下：

Firefox 48 之前，::first-letter 仅支持 CSS 2 中规定的 "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) 标点。

Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included, as in:

CSS Pseudo-Elements 4 中做了些许修改，所有的标点符号全部包含在内：

Punctuation (i.e, characters that belong to the Punctuation (P*) Unicode general category [UAX44]) that precedes or follows the first typographic letter unit must also be included in the ::first-letter pseudo-element.

所以 Firefox 48 之前并不支持 Pc（例如 ﹏） 和 Pd（例如 -，_）中的字符，这里修复了这个问题。其他浏览器的支持也不正确，::first-letter 应该选中第一个标点符号以及第一个字符。
（截图来自 MDN 文档 ）

符合规范的效果应该是这样的：

此时窗外灯影朦胧，桂叶婆娑。彼时，D2 夜场美酒畅谈，佳人如梦，在杜欢滚满床单后圆满落幕。

今年两个火热的话题，前后端分离与前端工程化。

静思回味，又去翻看了一下 D2官网，习惯性的审查元素，看了下 CSS 文件。

前进与问题并存：

1. iconfont（字体图标）逐步被产品接受并广为普及，从传统的刀耕火种（原始字体制作软件生产图标字体）到工程化自动化的实现，我厂 iconfont.cn 平台功不可没（此处有广告嫌疑）。接下来 woff2 的普及还任重道远，SVG 图标漫漫路长。
2. HTML5 标签逐步普及，但还远远不够，比如 依然用 .main 没有使用 <main>
3. 细节动画巧妙运用，但代码工程化处理上略显遗憾，特别是在前缀的处理上，还存在标准属性写在前缀属性前面的问题，线性渐变等不同时期 CSS 语法处理上捉襟见肘。粗鄙的猜测是自己写了一些简单的预处理器 mixin 来处理。

.foo {
  transform-origin: -25px 0; /* 应该放到最后 */
  -o-transform-origin: -25px 0;
  -ms-transform-origin: -25px 0;
  -moz-transform-origin: -25px 0;
  -webkit-transform-origin: -25px 0;
}

1. 存在一些典型有问题的代码：

   4.1 兼容性细节

   .foo {
    -webkit-tap-highlight-color: transparent; /* 部分浏览器只支持这个 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
   } 

   4.2 absolute 与 display 并存，display 属性自动计算为 block。

   .foo {
     position: absolute;
     display: inline-blcok; /* 多余属性 */
   }

然而上面的问题，传统 CSS 预处理来做似乎无能为力，依靠规范文档来提前预防效果亦是差强人意，特别是多人合作的项目，更是参差不齐。

抛开大局，审视细节，如何用工程化的角度来让这些小而烦的问题变的小而易呢？

正如 @xufei (民工) 所说：

『很庆幸我们生活在这个时代』，让我们有机会思考并解决这些问题，如何更好的规划 CSS 工作流，实现自动化工程化 CSS 开发，我们下期详述。

预告图：

有乌云我们不怕，怕的是有雾霾。

以上。

border-radius我相信对于老一辈的前端们有着特殊的感情，在经历了没有圆角的蛮荒时代，到如今 CSS3 遍地开花，我们还是很幸福的。

然而即使到了三星大脸流行时代，border-radius在移动端的表现依旧差强人意，主要有以下几点问题：

一、Android 2.3 自带浏览器不支持 %

通常我们实现一个正圆只需要border-radius: 50%即可，大致代码如下：

.foo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid blue;
}

然而 Android 2.3 是不支持百分比的，要兼容我们只能使用一个较大值，比如border-radius: 999px;

二、Android 及 Safari 低版本 img 圆角问题

当 img 元素有border 时设置border-radius 会导致圆角变形，需要在img 外面嵌套一个元素并设置border 和border-radius。

Demo

测试发现，在 Android 4.2.x 系统自带浏览器中，同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分，需要是使用background-clip: padding-box;来修复，但是如果border-color为半透明时，背景直角部分依然会露出来（参见图一）。

3.2 Android 4.2.x 不支持border-radius缩写

这个 BUG在小米上测试并未发现，国外有人反映三星 Galaxy S4 中自带浏览器不支持。

解决方案就是使用border-radius的四个扩写属性，缩写属性放到最后。

以上两个问题影响到 Android 4.2.x 内核的系统以及在其基础上定制的系统的自带浏览器，比如：红米，小米3，阿里云OS 等，安卓版 Chrome 不受影响。

完整代码应该是这样的：

.foo {
    width: 100px;
    height: 100px;
    border: 5px solid blue;
    border-top-left-radius: 999px; /* 左上角 */
    border-top-right-radius: 999px; /* 右上角 */
    border-bottom-right-radius: 999px; /* 右下角 */
    border-bottom-left-radius: 999px; /* 左下角 */
    border-radius: 999px;
    background-color: #ccc;
    background-clip: padding-box;
}

四、其他问题

1. IE9 中fieldset元素不支持border-radius。
2. IE9 中带有背景渐变(gradient)的时候背景溢出。

全部 Demo 截图：

感谢@方元 同学帮忙测试，欢迎反馈更多移动端 CSS 的问题。

 转载请注明出处：https://github.com/yisibl/blog/issues/2

曾几何时，我们在编写CSS的时候，经常会遇到一些重复的功能，在一次次的复制粘贴中，挥洒着我们码农的液体。

场景一：

在全局的 reset.css 中为标题元素指定了统一的样式。

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

在实际页面中发现，还需要为标题设置颜色，我们不得不再写一遍。

h1, h2, h3, h4, h5, h6 {
    color: #333;
}

场景二：特定的媒体查询可能会在很多地方会重复使用。

@media (min-device-width : 320px) and (max-device-width : 568px) {
  /* iPhone5 横屏和竖屏样式 */
}

这种重复的书写，使 CSS 产生了很多冗余，难以阅读，而且还影响维护，当每次有改动时需要重复改动很多地方，很痛苦而且很容易出错。

现在，规范小王子Tab Atkins 给我们带来了最新的《CSS Extensions》规范。在这份规范中，遇到这样的较长或重复使用的选择器可以指定一个简短、容易理解的名字来代替。

规范的语法是：

@custom-selector = @custom-selector <selector>;

其中， 以两个连字符 U+002D(--) 开头。例如场景一中，所有标题的集合可以取名为 heading，甚至可以把它作为一个伪类:--heading，然后根据规范中的语法应该这样写：

/* 全局 reset.css */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:--heading { 
  font-weight: normal;
}

/* 页面中的 CSS */
:--heading { 
  color: #333;
}

还可以配合其他选择器使用：

/* 排版时希望标题后面的段落没有上边距 */
:--heading + p { 
  margin-top: 0;
}

CSS2.1 的 4.1.3 节中提到：标识符（包括选择器中的元素名，类名和ID名）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码 U+00A1 及以上，再加连字符（-）和下划线（_）；它们不能以 数字，或一个连字符后跟数字为开头。这保证了两个连字符开头的自定义选择器不会被当做其他选择器。

实际上，现在所有的自定义名称都改为了两个连字符(--)。在之前的《CSS Custom Properties for Cascading Variables Module Level 1》规范中，使用 var-来定义一个变量：

:root {
  var-main-color: #06c;
  var-accent-color: #006;
}

#foo h1 {
  color: var(main-color);
}

单从语法上来看，调用变量时与定义的变量名称不统一，这很容易让人困惑。Tab Atkins 在这份邮件中也说明了改变语法的缘由。Firefox 31 已经支持新的语法，改进后的语法是这样的：

:root {
  --main-color: #06c;
  --accent-color: #006;
}

#foo h1 {
  color: var(--main-color);
}

再看看场景二，在Media Queries Level 4 第十一节Custom Media Queries中提到了自定义媒体查询的方法，我们可以这样复用：

@custom-media --iPhone5 (min-device-width : 320px) and (max-device-width : 568px);

@media (--iPhone5) {
  /* iPhone5 横屏和竖屏样式 */
}

@media (--iPhone5) and (orientation: landscape) {
  /* iPhone5 横屏 */
}

@media (min-device-width : 320px) and (max-device-width : 568px) {
  /* iPhone5 横屏和竖屏样式 */
}

怎么样，一切是不是很酷，这就是全部吗？NO~NO，规范中还将扩展：

• 自定义属性(Custom Properties)
• 自定义函数(Custom Functions)
• 自定义选择器组合器(Custom Selector Combinators)
• 自定义 @ 规则(Custom At-Rules)，在Media Queries Level 4规范里面有更详细的描述。

更多请阅读该规范，订阅 www-style 邮件组或者 @前端快爆 微博，参与讨论。

未来，CSS 将会更容易阅读，并且越来越强大。开发者可以直接扩展CSS本身的功能，而不是等待标准为他们定义新的功能。

CSS 难道不是世界上最好的语言吗？

在 Chrome 中输入 「background-color: rgba(0, 0, 0, 0.5)」

最终渲染出来你会发现变成了 「background-color: rgba(0, 0, 0, 0.498039)」。

阿西！这是什么鬼？( ･᷄ὢ･᷅ ) ，别急下面慢慢揭开它的神秘面纱。

一、 故事背景

在与 @Justineo 聊到 CSS Alpha 百分比表示方式的时候，偶然发现 Chrome 里他的这个项目kolor 的背景色实际计算出来的 Alpha 值和指定的不一样。

这引起了我们的兴趣，一番探讨搜索后，做个简要总结，备忘。

二、概念

CSS Color 中阿尔法通道（α Channel 或 Alpha Channel）是指颜色的不透明度，而不是透明度。也就是说：

• 不透明度=0 的时候是全透明。
• 不透明度=1 的时候就是完全不透明。

其中 32 位的颜色被分解成四个8位整数:

• R: 8位
• G: 8位
• B: 8位
• A: 8位

所以 Alpha 值在内部表示为介于0和255之间的一个整数（即8位无符号整数）。为了更加方便开发者使用，书写的时候我们采用 0-1 之间的浮点数来表示 Alpha 值。

三、 探索

那么我们看看 Chrome 中是如何计算出 0.5 的 Alpha 值的呢？

我们用input来表示输入 CSS 值中解析出来的字符串，A代表最终的 Alpha 值，alphaString来表示 CSS Color 中 Alpha 值的序列化结果：

1 把 0.5 转换为8位无符号整数

 A = atof(input) * 255; // atof() 相当于 JS 函数 parseFloat()

 => A = 0.5 * 255 = 127.5 => 127 // 舍去非整数部分

2 alphaString 通过以下定义来计算

const char* alphaString = numberToFixedPrecisionString(alpha() / 255.0f, 6, buffer, true);

注意：早期版本的 WebKit 采用 16 位来存储 Alpha 值，这会导致和现在版本最终计算出来存在差异，参见：http://www.zhihu.com/question/29781299/answer/45617540

这里alpha()的结果就是 A

alpha() / 255 = 127 / 255 = 0.498039216

然后 CSS Object Model (CSSOM) 规范中的 <number> 值规定最多取 6 位小数，最终反向序列化成字符串，得到你看到的 0.498039。

<number>
A base-ten number using digits 0-9 (U+0030 to U+0039) in the shortest form possible, using "." to separate decimals (if any), rounding the value if necessary to not produce more than 6 decimals, preceded by "-" (U+002D) if it is negative.

这里 WebKit 偷懒了啊：

CSSOM 规范里的算法是这样说的：

<alphavalue> 
If the value is internally represented as an integer between 0 and 255 inclusive (i.e. 8-bit unsigned integer), follow these steps:

1. Let alpha be the given integer.
2. If there exists an integer between 0 and 100 inclusive that, when multiplied with 2.55 and rounded to the closest integer (rounding up if two values are equally close), equalsalpha, let rounded be that integer divided by 100.
3. Otherwise, let rounded be alpha divided by 0.255 and rounded to the closest integer (rounding up if two values are equally close), divided by 1000.
4. Return the result of serializing rounded as a <number>.
   Otherwise, return the result of serializing the given value as a <number>.

所以有人提交了 Patch 来修复这个问题，使其反向序列号字符串的时候可以得到同样的值：

if (colorHasAlpha) {
  result.appendLiteral(", ");

  double floatAlpha = 0;
  // See  section in CSS Object Model (CSSOM)
  // Why ceil, not round here is that we ommit decimals in CSSPropertyParser::parseColorParameters.
  for (int i = static_cast < int > (ceil(alpha() / 2.56)); i <= 100; i) {
    int computedIntAlpha = static_cast < int > (i * nextafter(2.56, 0.0));
    if (computedIntAlpha == alpha()) {
      floatAlpha = i * 0.01;
      break;
    }
    if (computedIntAlpha > alpha())
      break;
  }

  if (!floatAlpha)
    floatAlpha = ceil(alpha() / nextafter(0.256, 0.0)) * 0.001;

  NumberToStringBuffer buffer;
  const char * alphaString = numberToFixedPrecisionString(alpha() / 255.0 f, 6, buffer, true);
  //const char * alphaString = numberToFixedPrecisionString(floatAlpha, 6, buffer, true);
  result.append(alphaString, strlen(alphaString));
}

更多

• Firefox 比较忠实的还原了用户的输入，这里是相关代码：http://hg.mozilla.org/mozilla-central/file/9b6b80222e66/layout/style/nsStyleUtil.cpp#l567
• 更多讨论参阅：https://lists.w3.org/Archives/Public/www-style/2015Jan/0596.html

特别鸣谢 @kyriosli 对 C++ 代码的帮助٩(๑ᵒ̴̶̷͈᷄ᗨᵒ̴̶̷͈᷅)و 。

更多讨论请移步知乎：http://www.zhihu.com/question/26248345/answer/45773454

Chrome Flash 设置 border-radius 不显示问题

iOS

首字母自动大写autocapitalize

在 iOS 中，用户可以手动开启「首字母自动大写」功能，这样输入英文的时候，首字母便会自动大写。但是，有些时候并不希望一直是首字母大写的。比如用户名这个字段，如果字段本身就是区分大小写的，首字母自动大写往往会给用户带来麻烦。可以通过在表单元素上可以通过设置autocapitalize="off"来关闭。

<input type="text" autocapitalize="off" placeholder="用户名-关闭首字母大写">

在设置→通用→键盘中开启「首字母自动大写」

还可以在form元素上设置该属性，让里面的每个元素都继承autocapitalize的设置。

<form autocapitalize="off">
  <input type="text"  placeholder="继承 form 的设置">
  <textarea></textarea>
</form>

iOS 5 开始新增了很多关键字：

• none等同于off。
• 当设置了autocapitalize="words"时，每个单词的开头字母会自动大写。
• 当设置了autocapitalize="characters" 时，每个字母都会大写。
• 当设置了autocapitalize="sentences" 时，每句开头字母会自动大写。

这里有一个综合示例

<form autocapitalize="words">
    名字: <input name="first-name">
    姓氏: <input name="last-name">
    国家: <input name="state" autocapitalize="characters">
    昵称: <input name="username" autocapitalize="off">
    评论: <textarea name="comment" autocapitalize="sentences"></textarea>
</form>

需要注意几点：

1. <input type="password" >始终不会开启自动首字母大写。
2. 如果在设置中没有开启「首字母大写」，即使设定autocapitalize="on"也不会有作用。
3. 如果「自动改正」和「首字母大写」都启用了，那么提示的字母也是首字母大写的。
4. 越狱后安装的中文输入法里自带的英文输入模式可能会不支持「首字母自动大写」功能。
5. 在删除后，再次输入依然是大写的，这一点体验比黑莓好。
6. 在 iOS7.1 中，键盘「shift」按钮的状态做了一些调整：
   

详见：Demo
官方文档

自动改正 autocorrect

这是一个布尔属性，可以设置off来关闭，同样可以设置在form元素上

<input type="text" autocorrect="off" placeholder="用户名-关闭自动改正">

Android

未完待续(^o^)/~

曾几何时，我们已经不再手写 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">

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"><!-- 禁止百度转码 -->

更多

参阅：

• 你需要知道的 HTML META
• HTML5 Boilerplate explanations and suggestions of header tags
• Complete List of HTML Meta Tags