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





目录
相关文章
|
2月前
|
存储 移动开发 前端开发
HTML哆啦A梦
HTML哆啦A梦
23 0
|
3月前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
86 4
|
算法框架/工具 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
|
移动开发 HTML5
HTML5 学习的疑难问题
HTML5 学习的疑难问题
91 0
HTML5 学习的疑难问题
|
开发者
meta 标签|学习笔记
快速学习 meta 标签
85 0
meta 标签|学习笔记
|
数据采集 缓存 搜索推荐
HTML中的<meta/>标签还能这么玩???【居然能搞动画】
HTML中的<meta/>标签还能这么玩???【居然能搞动画】
|
Web App开发 移动开发 前端开发
|
XML 移动开发 数据格式