h5网页中的meta字段

meta标签

meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等!
meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

h5网页<head>中的meta字段_第1张图片
网页中的meta字段

1 移动设备适配之meta中的viewport的深入理解

在我们的移动端的h5网页中,我们一般可以在中看到如下的一段代码:


该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。

viewport是啥?

通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。


content属性值 :
  • width:可视区域的宽度,值可为数字或关键词device-width
  • height:同width
  • intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
  • maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
  • maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
  • user-scalable:是否可对页面进行缩放,no 禁止缩放

2 声明文档使用的字符编码

3 声明文档的兼容模式

指示IE使用  

4 SEO 优化

页面关键词
定义网页作者
定义网页搜索引擎索引方式,robotterms是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。

5 iOS 设备

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

6 iOS 图标 rel 参数

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

7 iOS 启动画面

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 磁贴图标

9、不常用的

添加 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





11、条件注释判断IE浏览器

  
  
  
  

12.如果页面上出现很多http请求会自动转换成https


参考文章

解惑好文:移动端H5页面高清多屏适配方案

Viewport详解

html的meta总结
HTML5中meta属性的使用详解

你可能感兴趣的:(h5网页中的meta字段)