META:网页上的元信息(meta-information)标签

转载 2015年11月18日 16:40:16

meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
 

一、手机端特有的有哪些

 

1、<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

 

网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。


说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?


viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域
。对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了,在iphone上我们的webapp在竖屏下通常宽度都是320,这时我们320页面在iphone上显示成啥效果呢?有人可能认为iPhone不是320的宽度莫,感觉应该是满屏的吧,事实呢?我们来看一下如下布局在iPhone上的显示情况



HTML 代码   复制

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Meta Viewport</title>
    <style type="text/css">
    div,body{
    padding:0;
    margin:0;
    }
    body{
    padding-top:100px;
    color:#fff;
    }
    div{
    width:320px;
    height:100px;
    margin:0 auto;
    background:#000;
    text-align:center;
    font:30px/100px Arial;
    }
    </style>
</head>
<body>
<div>
AppUE
</div>
</body>
</html>

 

在iPhone上显示如图
 

 

因此我们必须改变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 ,形如:

 

设置了meat后我们页面将如此呈现了

 

 

我们就可以按全屏来布局我们的页面了,不用再担心页面显示的很小了

 

2、<meta name="format-detection" content="telephone=no">

 

当该 HTML 页面在手机上浏览时,该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。

 

在 iPhone 上默认值是

 

<meta name="format-detection" content="telephone=yes"/>

 

如果你不希望手机自动将网页中的电话号码显示为拨号的超链接,那么可以这样写:

 

<meta name="format-detection" content="telephone=no"/>

 

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

 

说明:网站开启对web app程序的支持。

 

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

 

说明:

  • 在web app应用下状态条(屏幕顶部条)的颜色;
  • 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。

注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

 

二、苹果web app其他设置

 

1、<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />

 

说明:这个link就是设置web app的放置主屏幕上icon文件路径

 

使用

  • 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
  • 图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)

 

2、<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

 

说明:这个link就是设置启动时候的界面(图片五),放置的路劲和上面类似。

 

使用

  • 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
  • 官方规定启动界面的尺寸必须为 320*640(px),原本以为Retina屏幕可以支持双倍,但是不支持,图片显示不出来。


最后,可以看看BAT的手机端页面META标签设置

一、天猫(http://m.tmall.com)

复制代码
<title>天猫触屏版</title> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">     
<meta charset="utf-8">             
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
<meta content="yes" name="apple-mobile-web-app-capable">     
<meta content="black" name="apple-mobile-web-app-status-bar-style">     
<meta content="telephone=no" name="format-detection">    
复制代码



二、淘宝(http://m.taobao.com)

复制代码
<title>淘宝网触屏版</title>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta property="wb:webmaster" content="c51923015ca19eb1">
<meta name="author" content="m.taobao.com">
<meta name="copyright" content="Copyright ©m.taobao.com 版权所有">
<meta name="revisit-after" content="1 days">
<meta name="keywords" content="">
<meta name="description" content="">
复制代码



三、京东(http://m.jd.com)

复制代码
<title> 京东 - 手机版 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<meta name="Keywords" content="手机购物,WAP商城,日用百货,3C家电,汽车用品"><meta name="description" content="京东手机版提供了包括数码、家电、手机、电脑配件、网络产品、日用百货等数万种商品,手机快捷购物,就上京东手机版。">  
复制代码



四、网易(http://3g.163.com)

<title>手机网易网</title>
<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-itunes-app" content="app-id=425349261">
<meta name="apple-mobile-web-app-capable" content="yes">



五、百度(http://m.baidu.com)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">

 


meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

手机端特有的有哪些?

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
<meta content="yes" name="apple-mobile-web-app-capable">     
<meta content="black" name="apple-mobile-web-app-status-bar-style">     
<meta content="telephone=no" name="format-detection"> 

第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;

width - viewport的宽度 height - viewport的高度   
initial-scale - 初始的缩放比例  
minimum-scale - 允许用户缩放到的最小比例   
maximum-scale - 允许用户缩放到的最大比例  
user-scalable - 用户是否可以手动缩放

 

第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;

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


第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码。


参考:
1、百度百科meta

2、手机网站前端设计

3、手机网页制作的认识(有关meta标签)

4、手机端的一些标准  

5、HTML <meta> 标签


HTML 代码   复制

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Meta Viewport</title>
    <style type="text/css">
    div,body{
    padding:0;
    margin:0;
    }
    body{
    padding-top:100px;
    color:#fff;
    }
    div{
    width:320px;
    height:100px;
    margin:0 auto;
    background:#000;
    text-align:center;
    font:30px/100px Arial;
    }
    </style>
</head>
<body>
<div>
AppUE
</div>
</body>
</html>

 

在iPhone上显示如图
 

 

因此我们必须改变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 ,形如:

 

设置了meat后我们页面将如此呈现了

 

 

我们就可以按全屏来布局我们的页面了,不用再担心页面显示的很小了

 

2、<meta name="format-detection" content="telephone=no">

 

当该 HTML 页面在手机上浏览时,该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。

 

在 iPhone 上默认值是

 

<meta name="format-detection" content="telephone=yes"/>

 

如果你不希望手机自动将网页中的电话号码显示为拨号的超链接,那么可以这样写:

 

<meta name="format-detection" content="telephone=no"/>

 

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

 

说明:网站开启对web app程序的支持。

 

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

 

说明:

  • 在web app应用下状态条(屏幕顶部条)的颜色;
  • 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。

注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

 

二、苹果web app其他设置

 

1、<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />

 

说明:这个link就是设置web app的放置主屏幕上icon文件路径

 

使用

  • 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
  • 图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)

 

2、<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

 

说明:这个link就是设置启动时候的界面(图片五),放置的路劲和上面类似。

 

使用

  • 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
  • 官方规定启动界面的尺寸必须为 320*640(px),原本以为Retina屏幕可以支持双倍,但是不支持,图片显示不出来。

相关文章推荐

网页元信息meta标签的作用以及使用

meta标签的使用,以及作用

网页头部标签meta详解

  • 2008年05月26日 23:36
  • 42KB
  • 下载

关于微信公众号内嵌网页的几个meta标签

 最近在做微信公众平台内嵌app,其实也就是web app="=,不过就是基于微信内置浏览器(safari加了一个WeixinJS对象),稍微记一下几个html的meta标签(web app通用...

网页HTML代码中Meta标签详解

很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧!  META标签是HTML语言HEAD区的一...

网页设计:Meta标签详解

网页设计:Meta标签详解 网页设计:Meta标签详解 很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重...

手机网页制作的认识(有关meta标签)

近日以来一直在看JQuery Mobile 一个手机开发框架,说实话真的很头疼的~~~~ 因为里面有很多的属性、方法和事件~~~ 下面是手机网页的一些认识:     一、     网页手机wap...
  • ye1992
  • ye1992
  • 2014年04月01日 09:29
  • 8214

移动端网页布局注意事项及解决 1.winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉 <meta name="msapplication-tap-highlight" c

移动端网页布局注意事项及解决 1.winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉 1、关闭iOS键盘首字母自动大写 2、禁止文本缩...
  • lamenw
  • lamenw
  • 2017年06月01日 18:03
  • 848

html网页中head之meta标签

什么是meta标签? 在一个网页中meta标签常常被用做网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签。 网页显示字符集网页编码 简体中文: 中文: 繁体中文:...

网页头部SEO优化:Meta标签参数详解http-equiv和name

meta是用来在HTML文档中模拟HTTP协议的响应头报文,META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。 http-equiv属性详解:    1...
  • han8888
  • han8888
  • 2011年11月03日 08:40
  • 490

HTML标签之Meta(头信息设置)

1、Expires (期限) 说明:指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅。 用法:Expires” Content=”0″> 注意:必须使用GMT...
  • blue225
  • blue225
  • 2016年12月27日 11:35
  • 662
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:META:网页上的元信息(meta-information)标签
举报原因:
原因补充:

(最多只允许输入30个字)