meta 头部信息
来源：互联网 发布：网络用语开屏什么意思 编辑：程序博客网 时间：2024/05/21 10:23
手机移动端网页的头部标签和 meta该怎么写比较好？
做网页（zuowangye.com）编者注：替换以下《》，即可放入网页正常使用。meta标签对移动端网页同样有很大的作用，那么该如何写比较好呢？
对于桌面平台web布局中大家对meta标签再熟悉不过了，它永远位于 head 元素内部，对做SEO的朋友一定对meta有种特殊的感情吧，今天我们就来说说移动平台的meta标签，在移动平台meta标签究竟有哪些神奇的功效呢？
meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name)。
http-equiv:
该枚举的属性定义，可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。
使用 HTML5 doctype，不区分大小写
《!DOCTYPE html》
--------------------------------------------------------------------------------
更加标准的 lang 属性写法
《html lang="zh-cmn-Hans"》
meta声明文档使用的字符编码
《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="author" content="name, email@gmail.com"/》
--------------------------------------------------------------------------------
搜索引擎抓取
《meta name="robots" content="index,follow"/》
--------------------------------------------------------------------------------
为移动设备添加 viewport
说到移动平台meta标签，那就不得不说一下viewport了，那么什么是viewport呢？
viewport即可视区域，对于桌面浏览器而言，viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说，980的宽度在iphone上显示是很正常的，也是满屏的，但对于webapp而言，可能就有点问题了，在iphone上我们的webapp在竖屏下通常宽度都是320，这时我们320页面在iphone上显示成啥效果呢？有人可能认为iPhone不是320的宽度莫，感觉应该是满屏的吧，事实呢？
《meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"》
width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边。 http://www.zuowangye.com
iOS 设备
添加到主屏后的标题（iOS 6 新增）
《meta name="apple-mobile-web-app-title" content="标题"》
--------------------------------------------------------------------------------
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
《meta name="apple-mobile-web-app-capable" content="yes"/》
--------------------------------------------------------------------------------
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
《meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"》
--------------------------------------------------------------------------------
设置苹果工具栏颜色
《meta name="apple-mobile-web-app-status-bar-style" content="black"/》
--------------------------------------------------------------------------------
忽略页面中的数字识别为电话，忽略email识别
《meta name="format-detection" content="telphone=no, email=no"/》
--------------------------------------------------------------------------------
启用360浏览器的极速模式(webkit)
《meta name="renderer" content="webkit"》
--------------------------------------------------------------------------------
避免IE使用兼容模式
《meta http-equiv="X-UA-Compatible" content="IE=edge"》
--------------------------------------------------------------------------------
针对手持设备优化，主要是针对一些老的不识别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应用模式
--------------------------------------------------------------------------------
windows phone 点击无高光
《meta name="msapplication-tap-highlight" content="no"》
--------------------------------------------------------------------------------
iOS 图标
iPhone 和 iTouch，默认 57x57 像素，必须有
《link rel="apple-touch-icon-precomposed" href="http://wap.b2b6.com/apple-touch-icon-57x57.png"/》
--------------------------------------------------------------------------------
Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有
《link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/》
--------------------------------------------------------------------------------
Retina iPad，144x144 像素，可以没有，但推荐有
《link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/》
iOS 启动画面
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 竖屏 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"/》
iOS 设备 end
Windows 8 磁贴颜色
《meta name="msapplication-TileColor" content="#000"/》
--------------------------------------------------------------------------------
Windows 8 磁贴图标
《meta name="msapplication-TileImage" content="icon.png"/》
--------------------------------------------------------------------------------
添加 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"/》
做网页（zuowangye.com）编者注：替换以下《》，即可放入网页正常使用。meta标签对移动端网页同样有很大的作用，那么该如何写比较好呢？
对于桌面平台web布局中大家对meta标签再熟悉不过了，它永远位于 head 元素内部，对做SEO的朋友一定对meta有种特殊的感情吧，今天我们就来说说移动平台的meta标签，在移动平台meta标签究竟有哪些神奇的功效呢？
meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name)。
http-equiv:
该枚举的属性定义，可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。
使用 HTML5 doctype，不区分大小写
《!DOCTYPE html》
--------------------------------------------------------------------------------
更加标准的 lang 属性写法
《html lang="zh-cmn-Hans"》
meta声明文档使用的字符编码
《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="author" content="name, email@gmail.com"/》
--------------------------------------------------------------------------------
搜索引擎抓取
《meta name="robots" content="index,follow"/》
--------------------------------------------------------------------------------
为移动设备添加 viewport
说到移动平台meta标签，那就不得不说一下viewport了，那么什么是viewport呢？
viewport即可视区域，对于桌面浏览器而言，viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说，980的宽度在iphone上显示是很正常的，也是满屏的，但对于webapp而言，可能就有点问题了，在iphone上我们的webapp在竖屏下通常宽度都是320，这时我们320页面在iphone上显示成啥效果呢？有人可能认为iPhone不是320的宽度莫，感觉应该是满屏的吧，事实呢？
《meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"》
width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边。 http://www.zuowangye.com
iOS 设备
添加到主屏后的标题（iOS 6 新增）
《meta name="apple-mobile-web-app-title" content="标题"》
--------------------------------------------------------------------------------
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
《meta name="apple-mobile-web-app-capable" content="yes"/》
--------------------------------------------------------------------------------
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
《meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"》
--------------------------------------------------------------------------------
设置苹果工具栏颜色
《meta name="apple-mobile-web-app-status-bar-style" content="black"/》
--------------------------------------------------------------------------------
忽略页面中的数字识别为电话，忽略email识别
《meta name="format-detection" content="telphone=no, email=no"/》
--------------------------------------------------------------------------------
启用360浏览器的极速模式(webkit)
《meta name="renderer" content="webkit"》
--------------------------------------------------------------------------------
避免IE使用兼容模式
《meta http-equiv="X-UA-Compatible" content="IE=edge"》
--------------------------------------------------------------------------------
针对手持设备优化，主要是针对一些老的不识别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应用模式
--------------------------------------------------------------------------------
windows phone 点击无高光
《meta name="msapplication-tap-highlight" content="no"》
--------------------------------------------------------------------------------
iOS 图标
iPhone 和 iTouch，默认 57x57 像素，必须有
《link rel="apple-touch-icon-precomposed" href="http://wap.b2b6.com/apple-touch-icon-57x57.png"/》
--------------------------------------------------------------------------------
Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有
《link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/》
--------------------------------------------------------------------------------
Retina iPad，144x144 像素，可以没有，但推荐有
《link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/》
iOS 启动画面
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 竖屏 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"/》
iOS 设备 end
Windows 8 磁贴颜色
《meta name="msapplication-TileColor" content="#000"/》
--------------------------------------------------------------------------------
Windows 8 磁贴图标
《meta name="msapplication-TileImage" content="icon.png"/》
--------------------------------------------------------------------------------
添加 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"/》
阅读全文
0 0
- meta 头部信息
- 去掉 Joomla 头部 meta name=”generator” 信息的输出
- 。网页头部META代码
- meta头部标签
- 网页头部meta标签
- HTML5头部meta整理
- 头部 meta 设置
- html头部标签meta
- 网页头部标签meta详解
- 网页头部meta系列用法
- 网页头部<meta>系列用法.
- html头部meta标签详解
- HTML5头部——meta
- 固定表格头部信息
- libpcap包头部信息
- HTML头部，元信息
- HTML头部信息
- TCP/IP头部信息
- Codeforces 828 C. String Reconstruction 思维
- POJ 3184 Finicky Grazers 笔记
- 备忘录----------下拉框选择触发事件
- C++中两个线程用同一个list进行数据传递
- Windows 编译caffe常见错误问题汇总
- meta 头部信息
- 预处理，编译，链接过程
- Spring Security 实现权限登陆配置
- Linux 下route命令详解
- MVP介绍以及优化封装
- 欢迎使用CSDN-markdown编辑器
- 编译keil 遇到File has been changed outside the editor，reload?问题解决方法
- 谷歌电子市场开发流程（4）-listview的两层封装
- 剑指offer--字符串的排列
