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

参考:
1、百度百科meta

2、手机网站前端设计

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

4、手机端的一些标准

5、HTML <meta> 标签

文章来自:http://www.cnblogs.com/kuikui/p/3590673.html

时间: 2024-11-07 06:29:38

关于meta知多少的相关文章

HTML5头部标签备忘

DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于html 标签之前,此标签告知浏览器文档使用哪种HTML 或者XHTML 规范. 推荐使用HTML5 推出的更加简洁的书写方式,它向前向后兼容. <!DOCTYPE html> html 简体中文 <html lang="zh-cmn-Hans"> meta chartset 声明文档使用的字符编码. <meta charset="utf-8"

我刚知道的WAP app中meta的属性

之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签中应该加什么属性时,我愣了一下,因为原来我写这方面代码时根本没有注意过这个问题,我以为在*.html文件里加上了<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforu

HTML Meta标签知多少

文章已同步至个人Blog:Benjamin - 专注前端开发和用户体验 一.基本属性 标签常常被用来定义HTML文档的元数据或者HTTP协议的指向,这些元数据常用在SEO.HTML Pages or Apps on Mobile/Handheld Devices,该标签主要包括以下属性: Attribute Description Name Name for the property. Can be anything. Examples include, keywords, descriptio

知问前端——创建header区

创建界面 我们首先要设计一个header,这个区域将要设计成永远置顶.也就是,往下拉出滚动条也永远在页面最上层可视区内.在header区,目前先设计LOGO.搜索框.按钮.注册和登录即可. 项目的大致骨架如下: index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type=&q

知问前端——邮箱自动补全

本节课,我们通过自动补全source属性的function回调函数,来动态的设置我们的数据源,以达到可以实现邮箱补全功能. 数据源function 自动补全UI的source不但可以是数组,也可以是function回调函数,提供了自带的两个参数设置动态的数据源. $('#email').autocomplete({ source : function (request, response) { //获取用户输入的内容 alert(request.term); //可以获取你输入的值 //绑定数据

typeof知多少

typeof知多少 昨天同事给我看了一道代码题,是关于typeof的,感觉挺有意思的,在这里分享给大家,顺便自己再对typeof总结总结.如有不对,请给予指出,共同进步. 代码是这样的: <!DOCTYPE html> <head> <title>typeof</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

HTML5 云知梦自觉,记录知识 点

文档类型:<!doctype html> 网站代码结构:<html> <head> <meta charset="UTF-8"> #设置浏览器的阅读编码 <title>云知梦-太原PHP培训|山西PHP培训</title> #设置网站首页的标题 <meta name="keywords" content="山西PHP培训,太原PHP培训,山西PHP开发> #设置网站的关键字

知问前端——日历UI(一)

日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); 修改datepicker()样式 日历UI的header背景和对话框UI的背景采用的是同一个class,所以在此之前已经被修改,所以,这里无须再修改了. /* 日历UI的今天单元格样式 */ .ui-datepicker-today .ui-state-highlight { border:1px

网页制作知多少

网页制作知多少 一.通用模板: <!DOCTYPE html> <html lang=”en”> <head> <meta  charset=”UTF-8”/> <title>文档标题</title> <link  rel="shortcut icon"  href="img\wujiaoxing.ico"/>       <!--设置标题图标--> </head&