关于meta知多少

简介: 本来打算写关于手机端的知识,想了想先从meta着手。接下来请大家看几个网站的例子。一、天猫(http://m.tmall.com) 天猫触屏版 二、淘宝(http://m.

本来打算写关于手机端的知识,想了想先从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> 标签





目录
相关文章
|
1天前
|
移动开发 前端开发 JavaScript
HTML的起源!
HTML的起源!
|
7月前
meta常用标签总结
meta常用标签总结
36 0
|
11月前
|
前端开发
测开学习篇-html
测开学习篇-html
|
12月前
|
前端开发
前端祖传三件套HTML的常用标签之框架
在网页布局中,使用框架可以方便地将页面分割为多个区域,并为每个区域设置不同的样式和内容。在HTML中,我们可以使用一些常用的框架标签来实现这一功能。在本文中,我们将介绍HTML中常用的几种框架标签。
56 0
|
算法框架/工具 PyTorch Python
Meta2032系统开发(详细及程序)丨Meta2032开发源码版
 Web 3.0 promotes the implementation of distributed economic models such as NFT,Defi,cryptocurrencies,and decentralized autonomous organizations(DAOs).The feature of Web 3.0 co construction and sharing is different from that of Web 2.0 where users are only users,enabling users in Web 3.0 to actively
|
数据采集 移动开发 前端开发
学习html,这一篇足矣(二)
学习html,这一篇足矣
108 0
学习html,这一篇足矣(二)
|
移动开发 前端开发 JavaScript
HTML学习完整篇
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。HTML页面也称为 HTML 文档。
151 1
HTML学习完整篇
|
移动开发 HTML5
HTML5 学习的疑难问题
HTML5 学习的疑难问题
79 0
HTML5 学习的疑难问题
|
数据采集 缓存 搜索推荐
HTML中的<meta/>标签还能这么玩???【居然能搞动画】
HTML中的<meta/>标签还能这么玩???【居然能搞动画】
|
XML 移动开发 数据格式