关于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> 标签





目录
相关文章
|
Web App开发 JavaScript Java
XWalkView+html 开发Android应用
在Android开发中有时候为了开发简洁和方便移植,采用了Html+WebView的开发模式,然而Android自带的WebView控件是调用的本机的浏览器内核,有些版本较老的手机浏览器和手机性能都不能满足需求(表现在html5不兼容、体验不流畅等地方)。
2285 0
|
4月前
|
编解码 开发者
meta viewport原理
meta viewport原理
87 0
|
7月前
|
前端开发 JavaScript API
Meta的开源力作:Lexical框架,富文本的未来
Meta的开源力作:Lexical框架,富文本的未来
127 1
|
Web App开发 移动开发 缓存
HTML基础铺垫
HTML(HyperText Markup Language)是一种通用的标记语言,用于构建和维护网页,它通过使用标签来描述网页的结构和内容。HTML标记可以指定网页的标题、段落、图像、链接、表格等元素。HTML标记也可以用于向网页添加样式和交互性,例如视频、音频、图像和表单。HTML5是HTML的最新版本,它提供了更多的功能和更好的可访问性。
HTML基础铺垫
meta常用标签总结
meta常用标签总结
99 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
|
安全 vr&ar 关系型数据库
Meta2032开发功能丨Meta2032系统开发(开发详细)丨Meta2032系统源码部署
 Web 3.0 infrastructure mainly includes node infrastructure, storage, oracle machines, security audits, data analysis platforms, wallets, development tools, etc. For example, the storage of assets on the wallet service user chain is an important entry point for Web 3.0, such as Metamarsk (Cryptocurr
|
Web App开发 移动开发 前端开发
【网页前端】HTML基础入门以及概述
【网页前端】HTML基础入门以及概述
121 0
【网页前端】HTML基础入门以及概述
|
Web App开发 编解码 缓存
常用meta整理
常用meta整理
|
容器
零基础html学习-第五期
零基础html学习
96 0