WebApp 里Meta标签大全

浏览数：42 / 时间：2015年06月11日

1.先说说mate标签里的viewport：

viewport即可视区域，对于桌面浏览器而言，viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说，980的宽度在iphone上显示是很正常的，也是满屏的，但对于webapp而言，可能就有点问题了，在iphone上我们的webapp在竖屏下通常宽度都是320。

因此我们必须改变viewport，我们就有如下几种属性值可以设置：

width: viewport 的宽度（范围从 200 到 10,000 ，默认为 980 像素）

height: viewport 的高度（范围从 223 到 10,000 ）

initial-scale: 初始的缩放比例（范围从>0到 10 ）

minimum-scale: 允许用户缩放到的最小比例

maximum-scale: 允许用户缩放到的最大比例

user-scalable: 用户是否可以手动缩放

对于这些属性，我们可以设置其中的一个或者多个，并不需要你同时都设置，iPhone 会根据你设置的属性自动推算其他属性值，而非直接采用默认值。

如果你把initial-scale=1 ，那么 width 和 height在竖屏时自动为320*356 （不是320*480 因为地址栏等都占据空间），横屏时自动为 480*208。类似地，如果你仅仅设置了 width ，就会自动推算出initial-scale 以及height。例如你设置了 width=320 ，竖屏时 initial-scale 就是 1 ，横屏时则变成 1.5 了

那么到底这些设置如何让 Safari 知道？其实很简单，就一个 meta ，形如：

2.meta标签里的name属性

name 属性
(1)、＜meta name="Generator" contect=""＞用以说明生成工具（如Microsoft FrontPage 4.0）等；

(2)、＜meta name="keywords" contect=""＞向搜索引擎说明你的网页的关键词；

(3)、＜meta name="Description" contect=""＞告诉搜索引擎你的站点的主要内容；

(4)、＜meta name="Author" contect="你的姓名"＞告诉搜索引擎你的站点的制作的作者；

(5)、＜meta name="Robots" contect="all | none | index | noindex | follow | nofollow"＞

其中的属性说明如下：

设定为all：文件将被检索，且页面上的链接可以被查询；

设定为none：文件将不被检索，且页面上的链接不可以被查询；

设定为index：文件将被检索；

设定为follow：页面上的链接可以被查询；

设定为noindex：文件将不被检索，但页面上的链接可以被查询；

设定为nofollow：文件将不被检索，页面上的链接可以被查询

3.webapp里主要的mate用途

这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

在iOS中有两个meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。