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-information)标签

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

meta标签详解(整理于网络)

meta标签分为两大部分:http标题信息(http-equiv)和页面描述信息(name)Http-equiv 类似于http的头部协议,回应给浏览器一些有用的信息(那些信息?),以帮助正确和精确...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

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

meta标签的使用,以及作用

Meta viewport (视口元信息标签)

前几天在研究移动版开发时,意外查阅到了PPK大神的关于viewport(视口)的研究文档,但无奈全是英文,只好硬着头皮看下去,并顺便试着翻译一下,以备日后回顾。 本人水平有限,如翻译错误,欢迎...

meta-data标签

meta-data API介绍

meta标签

title标题 meta name author> 网站作者 meta name classification> 网站所属目录类别 meta name copyright...

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

1、Expires (期限) 说明:指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅。 用法:Expires” Content=”0″> 注意:必须使用GMT...

meta标签

meta标签   meta是html语言head区的一个辅助性标签。几乎所有的网页里,我们可以看到类似 [网页中meta标签的使用,关键字] 网页中meta标签的使用,关键字 下面这段的htm...

Meta标签

Meta标签放在每个网页的...中,我们大家比较熟悉的如: 说明编辑工具;说明关键词;说明主页描述;<meta http-equiv="Content-T

html标签meta

可提供有关页面的元信息(meta-information),比如针对搜索和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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