一、大众机型常用meta标签name的设置
1、name之viewport
<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 低像素密度
完整案例:
< meta name = "viewport" content = "width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi " >
2、name之format-detection忽略电话号码和邮箱
<meta name="format-detection" content="telephone=no"> 说明:忽略页面中的数字识别为电话号码 <meta name="format-detection" content="email=no"/>
说明:忽略页面中的邮箱格式为邮箱
也可以写成:
< meta name = "format-detection" content = "telephone=no, email=no" />
3、name之设置作者姓名及联系方式
说明:设置作者姓名及联系方式
<meta name="author" contect="name, xxx@163.com" />
4、其他
<!-- 声明文档使用的字符编码 --> <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="robots" content="index,follow"/> <!-- 启用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"> <!-- 添加 RSS 订阅 --> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/> <!-- 添加 favicon icon --> <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/> <!-- 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 --> <!-- Windows 8 磁贴颜色 --> <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴图标 --> <meta name="msapplication-TileImage" content="icon.png"/> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no">
二、ios系统的meta/link设置:
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 系统会自动获取向匹配的图片:
< span style = "font-size:14px;" > < link rel = "apple-touch-icon-precomposed" href = "/apple-touch-icon-57x57-precomposed.png" /> < link rel = "apple-touch-icon-precomposed" sizes = "114x114" href = "/apple-touch-icon-114x114-precomposed.png" /> < link rel = "apple-touch-icon-precomposed" sizes = "144x144" href = "/apple-touch-icon-144x144-precomposed.png" /> </ span >
扩展:
为用户加上提示
通过添加一个JavaScript 代码来邀请用户添加到主屏幕,该库使用了HTML5 的本地存储跟踪是否已经显示过了,以避免重复出现。
目前使用比较多和有在更新的一个库来自这里:http://cubiq.org/add-to-home-screen
4、设置桌面图标的标题,
为了在主屏达到最好的显示效果, title
最好限制在六个中文长度内,超长的内容会被隐藏:
添加到主屏后的标题(iOS 6 新增)
< span style = "font-size:14px;" > < meta name = "apple-mobile-web-app-title" content = "标题" > </ span >
5、设置启动画面
当用户点击主屏图标打开 WebApp 时,系统会展示启动画面,在未设置情况下系统会默认显示该网站的首页截图,当然这个体验不是很好,所以我们需要通过以下代码来自定义启动画面:
< link rel = "apple-touch-startup-image" href = "Startup.png" />
根据 iOS 设备的分辨率,其启动画面的图片尺寸也各不相同所以:
< link rel = "apple-touch-startup-image" sizes = "768x1004" href = "/splash-screen-768x1004.png" /> < link rel = "apple-touch-startup-image" sizes = "1536x2008" href = "/splash-screen-1536x2008.png" /> < link rel = "apple-touch-startup-image" sizes = "1024x748" href = "/Default-Portrait-1024x748.png" /> < link rel = "apple-touch-startup-image" sizes = "2048x1496" href = "/splash-screen-2048x1496.png" /> < link rel = "apple-touch-startup-image" href = "/splash-screen-320x480.png" /> < link rel = "apple-touch-startup-image" sizes = "640x960" href = "/splash-screen-640x960.png" /> < link rel = "apple-touch-startup-image" sizes = "640x1136" href = "/splash-screen-640x1136.png" />
或者以下代码,具体没有实践,还需考证
<!!-- iPhone SPLASHSCREEN-- > <!link href ="http://wlog.cn/html/" apple -touch-startup-image-320x460.png" media = "(device-width: 320px)" rel = "apple-touch-startup-image" /> <!!-- iPhone (Retina) SPLASHSCREEN--> <!link href = "apple-touch-startup-image-640x920.png" media = "(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel = "apple-touch-startup-image" /> <!!-- iPad (portrait) SPLASHSCREEN--> <!link href = "apple-touch-startup-image-768x1004.png" media = "(device-width: 768px) and (orientation: portrait)" rel = "apple-touch-startup-image" /> <!!-- iPad (landscape) SPLASHSCREEN--> <!link href = "apple-touch-startup-image-748x1024.png" media = "(device-width: 768px) and (orientation: landscape)" rel = "apple-touch-startup-image" /> <!!-- iPad (Retina, portrait) SPLASHSCREEN--> <!link href = "apple-touch-startup-image-1536x2008.png" media = "(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel = "apple-touch-startup-image" /> <!!-- iPad (Retina, landscape) SPLASHSCREEN--> < link href ="apple-touch-startup-image-1496x2048.png" media ="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel = "apple-touch-startup-image" />
6、 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)
< meta name = "apple-itunes-app" content = "app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" >
==================
比较常用的meta
以下代码参考网址:view-source:三个w点adinnet点cn斜杠service斜杠3d点html
< html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > < title > </ title > < meta name = "keywords" content = "" /> < meta name = "description" content = "" /> < meta name = "title" content = "" /> < meta name = "author" content = "-06" /> < meta name = "Copyright" content = "" /> <!-- 让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核 ================================================== --> < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" > <!-- IOS6全屏 Chrome高版本全屏 ================================================== --> < meta name = "apple-mobile-web-app-capable" content = "yes" > < meta name = "mobile-web-app-capable" content = "yes" > <!-- 让360双核浏览器用webkit内核渲染页面 ================================================== --> < meta name = "renderer" content = "webkit" > <!-- Mobile Specific Metas ================================================== --> < meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" > < meta name = "format-detection" content = "telephone=no" > <!-- CSS ================================================== --> < link href = "/css/reset.css" rel = "stylesheet" type = "text/css" > < link href = "/css/magicwall.css" rel = "stylesheet" type = "text/css" > < link href = "/css/jquery.gridster.css" rel = "stylesheet" type = "text/css" > < link href = "/css/case.css" rel = "stylesheet" type = "text/css" > < link href = "/css/case_1280.css" rel = "stylesheet" type = "text/css" > < link href = "/css/case_1024.css" rel = "stylesheet" type = "text/css" > < link href = "/css/case_640.css" rel = "stylesheet" type = "text/css" > < link href = "/css/case_320.css" rel = "stylesheet" type = "text/css" > < link href = "/css/style_retina.css" rel = "stylesheet" type = "text/css" > <!--[if lt IE 9]> < script src = "http://cdn.bootcss.com/html5shiv/r29/html5.js" > </ script > <![endif]--> <!-- Favicons ================================================== --> < link rel = "shortcut icon" href = "favicon.ico" > <!-- Android 主屏图标 ================================================== --> < link rel = "icon" sizes = "196x196" href = "/images/apple-touch-icon-152x152.png" > <!-- IOS 主屏图标 ================================================== --> < link rel = "apple-touch-icon-precomposed" href = "/images/apple-touch-icon-76x76.png" > < link rel = "apple-touch-icon-precomposed" sizes = "76x76" href = "/images/apple-touch-icon-76x76.png" > < link rel = "apple-touch-icon-precomposed" sizes = "120x120" href = "/images/apple-touch-icon-120x120.png" > < link rel = "apple-touch-icon-precomposed" sizes = "152x152" href = "/images/apple-touch-icon-152x152.png" > < link rel = "apple-touch-startup-image" href = "/startup-748x1024.jpg" media = "screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" > < link rel = "apple-touch-startup-image" href = "/startup-768x1004.jpg" media = "screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" >
或者说
< meta name = "renderer" content = "webkit" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "HandheldFriendly" content = "true" > < meta name = "MobileOptimized" content = "320" > < meta name = "screen-orientation" content = "portrait" > < meta name = "x5-orientation" content = "portrait" > < meta name = "full-screen" content = "yes" > < meta name = "x5-fullscreen" content = "true" > < meta name = "browsermode" content = "application" > < meta name = "x5-page-mode" content = "app" > < meta name = "msapplication-tap-highlight" content = "no" >
整理====
meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟练使用它们。 1、声明文档使用的字符编码
2、声明文档的兼容模式
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> 指示IE以目前可用的最高模式显示内容 < meta http-equiv = "X-UA-Compatible" content = "IE=Emulate IE7" /> 指示IE使用 <!DOCTYPE > 指令确定如何呈现内容。标准模式指令以IE7 标准模式显示,而 Quirks 模式指令以 IE5 模式显示。
3、SEO 优化
< meta name = "description" content = "不超过150个字符" /> 页面描述 < meta name = "keywords" content = "html5, css3, 关键字" /> 页面关键词 < meta name = "author" content = "魔法小栈" /> 定义网页作者 < meta name = "robots" content = "index,follow" /> 定义网页搜索引擎索引方式,robotterms是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。
4、为移动设备添加 viewport
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" > 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 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写: < meta name = "viewport" content = "width=device-width, initial-scale=1, minimal-ui" >
5、iOS 设备
< meta name = "apple-mobile-web-app-title" content = "标题" > 添加到主屏后的标题(iOS 6 新增) < 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" 时生效 content 参数: default 默认值。 black 状态栏背景是黑色。 black-translucent 状态栏背景是黑色半透明。 设置为 default 或 black ,网页内容从状态栏底部开始。 设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。
6、iOS 图标 rel 参数
apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。 < link rel = "apple-touch-icon-precomposed" href = "/apple-touch-icon-57x57-precomposed.png" /> iPhone 和 iTouch,默认 57x57 像素,必须有 < link rel = "apple-touch-icon-precomposed" sizes = "72x72" href = "/apple-touch-icon-72x72-precomposed.png" /> iPad,72x72 像素,可以没有,但推荐有 < 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 像素,可以没有,推荐大家使用 < meta name = "apple-mobile-web-app-title" content = "标题" > title最好限制在六个中文长度内,超长的内容会被隐藏,添加到主屏后的标题(iOS 6 新增)
7、iOS 启动画面
iPad 的启动画面是不包括状态栏区域的。 iPad 竖屏 768 x 1004(标准分辨率) < link rel = "apple-touch-startup-image" sizes = "768x1004" href = "/splash-screen-768x1004.png" /> iPad 竖屏 1536x2008(Retina) < link rel = "apple-touch-startup-image" sizes = "1536x2008" href = "/splash-screen-1536x2008.png" /> iPad 横屏 1024x748(标准分辨率) < link rel = "apple-touch-startup-image" sizes = "1024x748" href = "/Default-Portrait-1024x748.png" /> iPad 横屏 2048x1496(Retina) < link rel = "apple-touch-startup-image" sizes = "2048x1496" href = "/splash-screen-2048x1496.png" /> iPhone 和 iPod touch 的启动画面是包含状态栏区域的。 iPhone/iPod Touch 竖屏 320x480 (标准分辨率) < link rel = "apple-touch-startup-image" href = "/splash-screen-320x480.png" /> iPhone/iPod Touch 竖屏 640x960 (Retina) < link rel = "apple-touch-startup-image" sizes = "640x960" href = "/splash-screen-640x960.png" /> iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) < link rel = "apple-touch-startup-image" sizes = "640x1136" href = "/splash-screen-640x1136.png" /> < link rel = "apple-touch-startup-image" href = "Startup.png" /> 当用户点击主屏图标打开 WebApp 时,系统会展示启动画面,在未设置情况下系统会默认显示该网站的首页截图,当然这个体验不是很好
8、Windows 8
< meta name = "msapplication-TileColor" content = "#000" /> Windows 8 磁贴颜色 < meta name = "msapplication-TileImage" content = "icon.png" /> Windows 8 磁贴图标
9、不常用的
< 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 < meta name = "format-detection" content = "telephone=no" /> 禁止数字识自动别为电话号码 < meta name = "format-detection" content = "email=no" /> 不让android识别邮箱 < meta name = "renderer" content = "webkit" > 启用360浏览器的极速模式(webkit) < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > 避免IE使用兼容模式 < meta name = "HandheldFriendly" content = "true" > 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 < meta name = "MobileOptimized" content = "320" > 微软的老式浏览器 < meta name = "x5-orientation" content = "portrait" > QQ强制竖屏 < meta name = "full-screen" content = "yes" > UC强制全屏 < meta name = "x5-fullscreen" content = "true" > QQ强制全屏 < meta name = "browsermode" content = "application" > UC应用模式 < meta name = "x5-page-mode" content = "app" > QQ应用模式 < meta http-equiv = "Cache-Control" content = "no-siteapp" /> 禁止百度转码 < meta name = "msapplication-tap-highlight" content = "no" > windows phone 点击无高光 < meta name = "keywords" content = "" /> 关键字 < meta name = "description" content = "" /> 描述 < meta name = "title" content = "" /> 标题 < meta name = "author" content = "-06" /> 作者 < meta name = "Copyright" content = "" /> 公司 < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" > 让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核 < meta name = "apple-mobile-web-app-capable" content = "yes" > IOS6全屏 < meta name = "mobile-web-app-capable" content = "yes" > Chrome高版本全屏 < meta name = "renderer" content = "webkit" > 让360双核浏览器用webkit内核渲染页面 < meta name = "apple-itunes-app" content = "app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" > 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)
10、sns 社交标签
参考微博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 = "描述" />
转载自:http://blog.csdn.net/kongjiea/article/details/17092413