html5 meta标签的属性,h5中meta标签
在制作移动网站的时候，除了页面简洁、操作方便等访问者能看到的地方，就是Meta标签的设置。合理的设置Meta标签，对于手机网站的搜索引擎优化和手机浏览器的渲染显示都是非常有帮助的。大家都很熟悉桌面平台web布局中的meta标签。它总是位于头元素内部。做SEO的朋友一定对meta有特殊的感情。今天我们就来聊聊移动平台的meta标签。meta标签在移动平台上有哪些神奇的作用？010-5900说到移动平台meta标签，就不得不说到viewport，那么viewport是什么呢？
Viewport是可视区域。对于桌面浏览器来说，viewport是指在删除所有工具栏、状态栏、滚动条等之后，用来查看网页的区域。对于传统网页来说，在iphone上全屏显示980的宽度是正常的，但是对于webapp来说，可能会有一些问题。在iphone上，我们的webapp通常在垂直屏幕中有320的宽度。此时我们的320页面在iphone上显示是什么效果？可能有人觉得iPhone不是320宽，应该是全面屏。真相是什么？让我们来看看下面的布局在iPhone上的显示。复制代码如下：
！声明文档类型
超文本标记语言
头
meta charset=utf-8
标题元视口/标题
style type=text/css
div，body{
填充：0；
边距：0；
}
正文{
填充顶部：100px
颜色：# fff
}
部门{
宽度：320px
高度：100px
边距：0自动；
背景：# 000；
文本对齐：居中；
字体：30px/100px Arial；
}
/风格
/头
身体
差异
AppUE
/div
/body
/html1、Meta 之 viewport width:视口的宽度(范围从200到10，000，默认为980像素)
高度：视口的高度(范围从223到10，000)
初始比例：初始比例(范围从0到10)
最小比例：允许用户缩放的最小比例。
Maximum-scale:允许用户缩放的最大比例。
用户可缩放：用户是否可以手动缩放。
对于这些属性，我们可以设置其中的一个或多个，你不需要同时全部设置。iPhone会根据你设置的属性自动计算其他属性值，而不是直接采用默认值。
如果您设置initial-scale=1，那么垂直屏幕的宽度和高度将自动为320*356(不是320*480，因为地址栏会占用空间)，水平屏幕的宽度和高度将自动为480*208。同样，如果您只设置宽度，初始比例和高度将自动计算。例如，如果将宽度设置为320，则垂直屏幕中的初始比例为1，水平屏幕中的初始比例为1.5。那么这些设置到底是怎么让Safari知道的呢？其实很简单。它只是一个元，它的形状如下：复制代码：
meta name=" viewport " content=" width=device-width；初始比例=1.0；最大比例=1.0；用户可扩展=0；"/
好的，我们可以全屏显示我们的页面，这样我们就不用担心页面太小了！因此我们必须改变viewport，我们就有如下几种属性值可以设置： 复制代码代码如下：
meta name=" format-detection " content=" telephone=no "/
你明明写了一串没有链接样式的数字，iPhone会自动给你的文字加上链接样式，点击这个数字自动拨号！我该怎么做才能去掉这个拨号链接？这个时候，就是我们的meta再次展现魔力的时候了。代码如下：
Telephone=no禁止将号码转换成拨号链接！
Telephone=yes打开号码到拨号链接的转换。要打开转换功能，不用写这个meta，默认是打开的！2、Meta 之 format-detection meta name=" apple-mobile-we b-app-capable " content=" yes "/
meta的作用是删除默认的苹果工具栏和菜单栏。内容有两个值“是”和“否”。当我们需要显示工具栏和菜单栏时，不需要添加这个line meta，默认显示。3、Meta 之 apple-mobile-web-app-capable 复制代码代码如下：
meta name=" apple-mobile-we b-app-status-bar-style " content=" default "/
meta name=" apple-mobile-we b-app-status-bar-style " content=" black "/
meta name=" apple-mobile-we b-app-status-bar-style " content=" black-translucent "/
用于控制状态栏显示样式的复制代码如下：
状态栏样式：黑色
状态栏样式：黑色半透明
今天我们就来简单说说手机网站需要添加哪几种Meta标签:4、Meta 之 apple-mobile-web-app-status-bar-style 。
视口几乎是公认的标准。它最初是由苹果公司为iPhone上的移动版Safari创建的。由于iPhone的流行，大多数其他移动浏览器都接受它，如Opera Mobile，iPhone，Android，Iris，IE，BlackBerry，Obigo和Firefox。
最基本的例子是在手机上制作全屏幕宽度的站点：复制代码如下：
meta= viewport content= width=device-width，initial-scale=1.0 /handy friendly这个标签和下面描述的MobileOptimized是功能机时代事实上的标签。
HandheldFriendly标签最早是在AvantGo中浏览，用来标记移动内容，后来成为了标记移动站点的通用标准，但不知道这个标签的支持情况。复制代码如下：
meta name= handled friendly content= true /
viewport
这是一个Windows特有的meta标签，最终成为另一种识别移动内容的方法。然而，这个标签的缺点是必须给出一个特定的宽度。同样，这个标签的支持是未知的：复制代码如下：
meta name= mobile optimized content= 320 /
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。