`
zzc1684
  • 浏览: 1229126 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

meta详解 meta标签

阅读更多

本来打算写关于手机端的知识,想了想先从meta着手。接下来请大家看几个网站的例子。

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标签表示:告诉设备忽略将页面中的数字识别为电话号码。

分享到:
评论

相关推荐

    网页头部标签meta详解

    网页头部标签meta详解 Meta标签是HTML文档头部的一个重要组成部分,它提供了关于当前网页的Metadata信息,帮助搜索引擎和浏览器更好地理解和处理网页内容。Meta标签主要有两个属性:name属性和http-equiv属性。 ...

    Meta标签详解

    ### Meta标签详解 #### 一、Meta标签简介与作用 Meta标签是HTML语言中的一个辅助性标签,位于HTML文档头部的`&lt;HEAD&gt;`区域,并在`&lt;TITLE&gt;`标签之前。虽然用户在浏览网页时无法直接看到这些信息,但对于网页的SEO...

    meta标签详解meta标签详解

    meta 标签详解 meta 标签是 HTML 语言 HEAD 区的一个辅助性标签,它位于 HTML 文档头部的 &lt;HEAD&gt; 标记和 &lt;TITLE&gt; 标记之间,提供用户不可见的信息。meta 标签通常用来为搜索引擎 robots 定义页面主题,或者是定义...

    META标签使用详解

    ### META标签使用详解 #### 一、概述 META标签是一种重要的HTML元素,用于提供关于HTML文档的元数据信息。这些信息对于浏览器来说至关重要,能够帮助浏览器更好地解析网页内容,并为用户提供更佳的浏览体验。根据...

    网页HTML代码中Meta标签详解.pdf

    网页HTML代码中Meta标签详解 Meta标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的标记和标记之间,提供用户不可见的信息。Meta标签通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的...

    META标签详解、解决JSP页面显示乱码问题

    ### META标签详解与应用 #### 一、META标签概述 META标签是HTML语言中的一个辅助性标签,位于文档的`&lt;head&gt;`部分。虽然它不直接影响网页内容的展示,但对网页的SEO优化、浏览器兼容性和用户体验等方面具有重要作用...

    HTML中meta详解

    以下是对`meta`标签及其各种属性的详细解释: 1. **name属性**: - `Generator`: 用于标识创建网页的工具或软件,例如`&lt;meta name="Generator" content="Microsoft FrontPage4.0"&gt;`。 - `Keywords`: 描述网页的...

    网页设计中meta详解

    在网页设计中,`&lt;meta&gt;` 标签扮演着至关重要的角色。它是 HTML5 文档类型中的一个元素,用于提供关于文档的各种元信息,这些信息包括网页的字符编码、描述、关键词、重定向、刷新等。`&lt;meta&gt;` 标签通常位于 `&lt;head&gt;`...

    html-meta标签详解

    meta标签为浏览器和搜索引擎提供了重要信息,这些信息用来控制页面的描述、关键词、刷新率以及其他多种功能。meta标签大致可以分为两类属性:name和http-equiv。 name属性主要用于描述网页,其对应的content属性值...

    WebApp里的Meta标签大全

    ### WebApp中的Meta标签详解 #### 一、引言 在Web开发中,尤其是在构建适应移动设备的Web应用(WebApp)时,正确使用HTML中的`&lt;meta&gt;`标签至关重要。它不仅可以帮助开发者控制页面的布局与展示效果,还能优化SEO、...

    网页HTML代码中Meta标签详解.txt

    网页HTML代码中Meta标签详解.txt

    META信息详解 META信息详解

    声明一下,这些信息我是转载别人的,因为做信息采集,经常需要对HTTP协议和HTML中META信息有了解。不管使用什么语言做采集都是一样的

    meta标签中的

    ### Meta标签中的http-equiv属性详解 #### 一、Meta标签概述 在HTML文档中,`&lt;meta&gt;`标签被广泛应用于头部(`&lt;head&gt;`部分),主要用于定义页面的元数据(metadata)。这些元数据通常不直接对用户可见,但对浏览器...

    html中标签meta的详细使用方法和作用

    ### HTML中的`&lt;meta&gt;`标签详解与应用 #### 一、`&lt;meta&gt;`标签概述 在HTML中,`&lt;meta&gt;`标签主要用于定义元数据(metadata),即关于数据的数据。这些元数据不会显示在页面上,但会被浏览器用来理解网页的一些基本...

Global site tag (gtag.js) - Google Analytics