一、普通手机页的设置

1.<meta name="viewport" content=""/>说明：屏幕的缩放

content的几个属性：width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是iOS支持；height – viewport 的高度 （范围从 223 到 10,000 ）user-scalable [yes | no]是否允许缩放initial-scale [数值] 初始化比例（范围从 > 0 到 10）minimum-scale [数值] 允许缩放的最小比例maximum-scale [数值] 允许缩放的最大比例target-densitydpi 值有以下（一般推荐设置中等响度密度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）     -- dpi_value 一般是70-400//没英寸像素点的个数     -- device-dpi设备默认像素密度     -- high-dpi 高像素密度     -- medium-dpi 中等像素密度     -- low-dpi 低像素密度

完整案例：

2.name之format-detection忽略电话号码和邮箱

    说明：忽略页面中的数字识别为电话号码
    说明：忽略页面中的邮箱格式为邮箱

也可以写成：

3.name之设置作者姓名及联系方式

4.其他

二、iOS系统的meta设置：

1、开启对web app程序的支持<meta name="apple-mobile-web-app-capable" content="yes">说明：

网站开启对web app程序的支持，其实意思就是删除默认的苹果工具栏和菜单栏，开启全屏显示

2、 改变顶部状态条的颜色；

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

在 web app 应用下状态条（屏幕顶部条）的颜色；默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；

3、设置“添加到主屏幕图标

Safari 浏览器有一个“添加到主屏幕”的功能，用户可以像保存书签一样把一个网站添加到主屏幕，下次用户直接点击主屏幕上的图标就能进入网站。

这个功能不仅方便用户快速访问我们的网站，而且也使我们的 WebApp 更像一个原生应用

因为 iOS 分辨率，所以 icon.png 图片的尺寸也各不相同，我们可以通过sizes属性来分别定义，iOS 系统会自动获取向匹配的图片：

扩展：

为用户加上提示

通过添加一个JavaScript代码来邀请用户添加到主屏幕，该库使用了HTML5的本地存储跟踪是否已经显示过了，以避免重复出现。

目前使用比较多和有在更新的一个库来自这里：

4、设置桌面图标的标题

为了在主屏达到最好的显示效果，title最好限制在六个中文长度内，超长的内容会被隐藏：

5、设置启动画面

当用户点击主屏图标打开 WebApp 时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好，所以我们需要通过以下代码来自定义启动画面：

根据 iOS 设备的分辨率，其启动画面的图片尺寸也各不相同所以：

或者以下代码，具体没有实践，还需考证

6、 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

比较常用的meta

或者说

整理====

meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。

1、声明文档使用的字符编码

2、声明文档的兼容模式

     指示IE以目前可用的最高模式显示内容  
    指示IE使用  指令确定如何呈现内容。标准模式指令以IE7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。

3、SEO 优化

    页面描述  
    页面关键词  
    定义网页作者  
    定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。  
          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 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：  
    

5、iOS 设备

    添加到主屏后的标题（iOS 6 新增）  
    是否启用 WebApp 全屏模式  
    设置状态栏的背景颜色      只有在 "apple-mobile-web-app-capable" content="yes" 时生效      content 参数：      default 默认值。      black 状态栏背景是黑色。      black-translucent 状态栏背景是黑色半透明。      设置为 default 或 black ,网页内容从状态栏底部开始。      设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

6、iOS 图标 rel 参数

apple-touch-icon 图片自动处理成圆角和高光等效果。  apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。  
    iPhone 和 iTouch，默认 57x57 像素，必须有  
    iPad，72x72 像素，可以没有，但推荐有  
    Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有  
    Retina iPad，144x144 像素，可以没有，推荐大家使用  
    title最好限制在六个中文长度内，超长的内容会被隐藏，添加到主屏后的标题（iOS 6 新增）

7、iOS 启动画面

iPad 的启动画面是不包括状态栏区域的。  iPad 竖屏 768 x 1004（标准分辨率）  
    iPad 竖屏 1536x2008（Retina）  
    iPad 横屏 1024x748（标准分辨率）  
    iPad 横屏 2048x1496（Retina）  
      iPhone 和 iPod touch 的启动画面是包含状态栏区域的。  iPhone/iPod Touch 竖屏 320x480 (标准分辨率)  
    iPhone/iPod Touch 竖屏 640x960 (Retina)  
    iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)  
      
      当用户点击主屏图标打开 WebApp 时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好

8、Windows 8

     Windows 8 磁贴颜色  
    Windows 8 磁贴图标

9、不常用的

    添加 RSS 订阅  
    添加 favicon icon  
    禁止数字识自动别为电话号码  
    不让android识别邮箱  
    启用360浏览器的极速模式(webkit)  
    避免IE使用兼容模式  
    针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓  
    微软的老式浏览器  
    QQ强制竖屏  
    UC强制全屏  
    QQ强制全屏  
    UC应用模式  
    QQ应用模式  
    禁止百度转码  
    windows phone 点击无高光  
      关键字  
      描述  
      标题  
      作者  
      公司  
       让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核   
      IOS6全屏  
      Chrome高版本全屏  
      让360双核浏览器用webkit内核渲染页面  
     添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

10、sns 社交标签

参考微博API