1. 定义针对搜索引擎的关键词:<meta name="keywords" content="meta,red" />

  2. 定义对页面的描述:<meta name="description" content="这是meta教程" />

  3. 定义页面的最新版本:<meta name="revised" content="bu, 2016/5/10/" />

  4. 每 5 秒刷新一次页面:<meta http-equiv="refresh" content="5" />

  5. 网页作者: <meta name="author" content="name, email@gmail.com"/>

  6. 添加智能 App 广告条(iOS 6+ Safari):<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

  7. 设置苹果工具栏颜色:<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

  8. 忽略页面中的数字识别为电话,忽略email识别 :<meta name="format-detection" content="telphone=no, email=no"/>

  9. 是否启用 WebApp 全屏模式:<meta name="apple-mobile-web-app-capable" content="yes" />

  10. 是否删除默认的苹果工具栏和菜单栏:<meta name="apple-mobile-web-app-capable" content="yes" />  和9一样。

  11. 启用电话功能,请使用<a href="tel:15855555555">15855555555</a>来代替,邮件则为<a href="mailto:xxx@xxx.com">发送邮件</a>

  12. windows phone 点击无高光 

    <meta name=”msapplication-tap-highlight” content=”no”>

  13. 不让百度转码

    <meta http-equiv=”Cache-Control” content=”no-siteapp” />

  14. 设置“添加到主屏幕图标:用户可以像保存书签一样把一个网站添加到主屏幕,下次用户直接点击主屏幕上的图标就能进入网站。

<link rel=“apple-touch-icon-precomposed” href=“/apple-touch-icon-57×57-1.png”/>

<!– iPhone 和 iTouch,默认 57×57 像素,必须有 –>

<link rel=“apple-touch-icon-precomposed” sizes=“114×114” href=“/apple-touch-icon-114×114-precomposed.png”/>

<!– Retina iPhone 和 Retina iTouch,114×114 像素,可以没有,但推荐有 –>

<link rel=“apple-touch-icon-precomposed” sizes=“144×144” href=“/apple-touch-icon-144×144-precomposed.png”/>

<!– Retina iPad,144×144 像素,可以没有,但推荐有 –>

添加到主屏幕后系统会默认给图片加上IOS相关的图标风格(比如圆角),如果需要系统直接展示原图使用apple-touch-icon-precomposed,如果需要系统添加风格使用apple-touch-icon。

15、设置桌面图标的标题

<span style=“font-size:12px;”><meta name=“apple-mobile-web-app-title” content=“标题”></span>最好限制在六个中文长度内,超长的内容会被隐藏

16、设置启动画面:需要的百度下啊

移动端viewport设置:

<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 ">

说明:

width: viewport 的高度 (数值/device-width) ,(范围从 200 到 10,000 ,默认为 980 像素 )

height : viewport 的高度  (数值/device-width) ,(范围从 223 到 10,000 )

user-scalable [yes | no] :是否允许缩放

initial-scale [数值] :初始化比例(范围从 > 0 到 10)

minimum-scale [数值] :允许缩放的最小比例

maximum-scale [数值] :允许缩放的最大比例

<!--社交标签 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="描述" />

h5 meta学习的更多相关文章

  1. 值得H5前端学习的60个JS插件(含DEMO演示)

    下面也可以说是H5前端学习的js插件大全.基本包含了大部分的前端最前沿的js插件和库. 布局 SuperEmbed.js- 是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式 ...

  2. H5的学习之旅-H5的实体(14)

    H5有些关键字比如<等等是显示不出来的,这时候,就需要用实体来表示,实体我理解就是最初的编码 代码实例 <!DOCTYPE html> <html lang="en& ...

  3. H5 meta小结

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, ...

  4. Viewprot meta学习笔记

    viewprot屏幕尺寸,专为移动页面设计 参数 <meta name="viewport" content="height,width,initial-scale ...

  5. H5性能测试学习

    工欲善其事,必先利其器,在做H5前端性能测试之前,选择合适的工具能让我们的测试工作事半功倍.本文要提到的工具有两类: 一类是抓包工具,如Fiddler.Charles等.这类工具不仅可以抓包,还可以对 ...

  6. 利用h5 meta 头标签设置og属性进行帖子分享图片时而有时而无

    <meta property="og:title" content="fgsfg"> <meta property="og:desc ...

  7. H5 meta标签常用写法

    <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content=" ...

  8. H5案例学习笔记

    ★基础篇     增加主体结构元素    

  9. H5 css学习

    p{text-indent:2em;}段前空两格   段落排版--行间距(行高) p{line-height:1.5em;} 段落排版--中文字间距.字母间距  h1{    letter-spaci ...

随机推荐

  1. DB Error || Warning

    数据库在进行增删改查时有时候会发生错误,当在程序中一个操作总是不起作用的时候,我们可以尝试如下方法: 1.输出sql语句,有的sql语句可能是通过一些字符拼接完成的,这时候可能会发生'', +之类的混 ...

  2. sqlserver优化

    有些程序员在撰写数据库应用程序时,常专注于 OOP 及各种 framework 的使用,却忽略了基本的 SQL 语句及其「性能 (performance)优化」问题.版工曾听过台湾某半导体大厂的新进程 ...

  3. echarts用法

    参考文档: https://github.com/xlsdg/vue-echarts-v3 1.下载echarts插件 $ npm install --save vue-echarts-v3 2.引入 ...

  4. 安装python虚拟环境

    虚拟环境: 之前安装python包的命令: sudo pip3 install 包名包的安装路径:/usr/local/lib/python3.5/dist-packages安装同一个包的不同版本,后 ...

  5. NSMutable属性声明时为什么不能使用copy

    在iOS开发里面我们经常会进行NSMutable(可变类型的类,常用的如NSMutableString,NSMutableArray,NSMutableDictionary,NSMutableData ...

  6. 转:【Java并发编程】之十:使用wait/notify/notifyAll实现线程间通信的几点重要说明

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17225469    在Java中,可以通过配合调用Object对象的wait()方法和no ...

  7. 201521123084 《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集集合 1. List中指定元素的删除(题目 ...

  8. 【Alpha】——Fourth Scrum Meeting

    一.今日站立式会议照片 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 李永豪 完善添加功能 测试统计功能 郑靖涛 完善删除功能 着手编写报表设计 杨海亮 完善查找功能 协助编写统计功能 ...

  9. 201521123111《Java程序设计》第3周学习总结

    1. 本章学习总结 你对于本章知识的学习总结 2. 书面作业 1. 代码阅读 代码阅读 public class Test1 { private int i = 1;//这行不能修改 private ...

  10. 201521123001《Java程序设计》第1周学习总结

    1. 本周学习总结 java和我们以前学的C语言的区别大致有: C语言可以直接操作内存,java不能直接操作: C语言的代码不能跨平台,java的代码可以跨平台: C语言有指针,java没有指针: C ...