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 ,形如 :

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> 设置了meat后我们页面将如此呈现了

2.meta标签里的name属性

name 属性
(1)、<meta name="Generator" contect="">用以说明生成工具(如Microsoft FrontPage 4.0)等;

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

(3)、<meta name="robots" content="index,follow" /> <!-- all:文件将被检索,且页面上的链接可以被查询; none:文件将不被检索,且页面上的链接不可以被查询; index:文件将被检索; follow:页面上的链接可以被查询; noindex:文件将不被检索; nofollow:页面上的链接不可以被查询。 -->

(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 name="apple-touch-fullscreen" content="yes">  添加到主屏幕后,全屏显示。

<meta name="apple-mobile-web-app-capable" content="yes" />

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

<meta name=”apple-mobile-web-app-status-bar-style” content=black” />

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

<meta name="apple-mobile-web-app-capable" content="yes">   <!-- 启用 WebApp 全屏模式 -->


<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">   隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。

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

<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
说明: 这个link就是设置web app的放置主屏幕上icon文件路径。
图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)

<meta name="format-detection" content="telephone=no"> 当该 HTML 页面在手机上浏览时,该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。

在 iPhone 上默认值是:<meta name="format-detection" content="telephone=yes"/>

如果你不希望手机自动将网页中的电话号码显示为拨号的超链接,那么可以这样写:<meta name="format-detection" content="telephone=no"/>

<meta content="telephone=no" name="format-detection" />  忽略数字自动识别为电话号码

<meta content="email=no" name="format-detection" />   //将不识别邮箱

<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />

iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标。

<meta name="sharecontent" data-msg-img="缩略图地址" data-msg-title="标题" data-msg-content="简介" data-msg-callBack="" data-line-img="缩略图地址" data-line-title="标题" data-line-callBack=""/>

<meta http-equiv="refresh" content="0;url=" /> 页面重定向和刷新:content内的数字代表时间(秒),既多少时间后刷新。如果加url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!-- 关于X-UA-Compatible -->

<meta http-equiv="X-UA-Compatible" content="IE=6" > <!-- 使用IE6 -->

<meta http-equiv="X-UA-Compatible" content="IE=7" > <!-- 使用IE7 -->

<meta http-equiv="X-UA-Compatible" content="IE=8" > <!-- 使用IE8 -->

-- 摘自网络

webAPP meta 标签大全的更多相关文章

  1. meta标签大全

    meta标签大全 <!--     x-ua-compatible(浏览器兼容模式)     仅对IE8+以效     告诉浏览器以什么版本的IE的兼容模式来显示网页     <meta ...

  2. meta标签大全(荐)

    html的meta总结(常用) 1.Meta标签大全 <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最 ...

  3. WebApp 里Meta标签大全,webappmeta标签大全

    1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...

  4. WebApp 里Meta标签大全

    1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...

  5. 移动webApp必备技能一、WebApp 里Meta标签大全,webappmeta标签大全

    1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...

  6. Webapp meta标签解决移动缩放的问题

    webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" ...

  7. meta 标签大全

    相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...

  8. Meta标签大全_web开发常用meta整理

    meta标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务. 必要属性 属性 值 描 ...

  9. HTML中Meta标签大全

    在网页的HTML源代码中一个重要的代码“”(即通常所说的META标签).META标签用来描述一个HTML网页文档的属性,例如作者.日期和时间.网页描述.关键词.页面刷新等. 1.META标签的keyw ...

随机推荐

  1. Android模糊效果总结

    1. 软件模糊 用软件的方法.利用cpu计算,无sdk版本号要求. 效果图: 关键模糊代码 github链接 原文 链接 译文 链接 演示样例 代码 本文地址 :http://blog.csdn.ne ...

  2. 九度OJ 1149:子串计算 (计数、排序)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1026 解决:571 题目描述: 给出一个01字符串(长度不超过100),求其每一个子串出现的次数. 输入: 输入包含多行,每行一个字符串. ...

  3. AWS:4.VPC

    主要介绍 1.Amazon混合云 2.将EC2加入VPC 3.VPC经典场景 4.VPC安全保障 Amazon混合云 : 在公有云的基础上创建私有云 VPC概念 VPC(VPC Virtual Pri ...

  4. 子串的索引 str.index(sub) sub必须存在

    ii.lstrip(' ')[0:2]=='//' ii.lstrip(' ').index('//')==0

  5. svn服务的安装和使用

    更新linux软件库 cat /etc/redhat-release wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.c ...

  6. HTML 学习笔记 JQuery(DOM 操作3)

    设置和获取HTML 文本 和 值 1.html()方法 类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容 例子 <html> <he ...

  7. 【题解】CF24D Broken Robots(收敛性)

    [题解]CF24D Broken Robots http://codeforces.com/problemset/problem/24/D 解1(不会写,口胡的) 获得一个比较显然的转移式子 \(dp ...

  8. python数据分析之Pandas:汇总和计算描述统计

    pandas对象拥有一组常用的数学和统计方法,大部分都属于约简和汇总统计,用于从Series中提取单个的值,或者从DataFrame中的行或列中提取一个Series.相比Numpy而言,Numpy都是 ...

  9. web 全栈 学习 1 工程师成长思路图

    第一部分: 技术的三个阶段 实现 ---> 借鉴 ---> 优化 实现:为了实现功能,不考虑可读性.借鉴:阅读开源代码,开源程序,学到编程思想.优化:可读性,可执行. 阶段一:实现多做事, ...

  10. ASP.Net .Net4.0 HTTP 错误 404.17 - Not Found

    源:ASP.Net .Net4.0 HTTP 错误 404.17 - Not Found 用了网上很多方法,最后是用这个网友的方法解决的,在此做个记录. VS2010编写WebService与在IIS ...