淘宝网触屏版 - 学习笔记(1 - 关于meta)

  注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅。

<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta name="data-spm" content="a215s">
<meta content="telephone=no,email=no" name="format-detection">
<meta content="fullscreen=yes,preventMove=no" name="ML-Config">
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

  以上是我于2015.4.10摘自m.taobao.com的head中的meta标签

  下面就一个个研究过去吧:

  1、<meta charset="utf-8">

  不算移动端知识:charset 属性是 HTML5 中的新属性

  替换了:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  减少了代码量

  2、<meta content="yes" name="apple-mobile-web-app-capable">

  设置Web应用是否以全屏模式运行(说是iphone私有属性,但是我在小米上测试了一下也成功了居然)。

  但我在手机中的safari和chrome中测试效果都不太理想,只有当页面往下滑动时,顶部浏览器窗口才会隐藏,一旦往上滑动,浏览器窗口就会出现。

  这样的效果太不理想,所以还需代码上另做配合:

  淘宝触屏版显然在此处又有心机(这心机表=,=)。

  

  显然,固定窗口高度是必须的。设置overflow和height后,浏览器便不会 移动,所以顶部的浏览器窗口在用户第一次下滑导致隐藏后,便会一直隐藏,因为之后的滑动都是对fullscreen这个里面的窗口操作的。

  还有一点十分重要:

    在以上设置之后,要像淘宝网触屏版一样,在载入页面时就隐藏浏览器窗口,使之更像app,还必须加一句js

<script>
    window.scrollTo(0, 0);
</script>

    使浏览器页面滑动到顶部,这样,浏览器的那个地址栏就会在载入时就自动隐藏了!

  题外话:

    淘宝还重自定义了内层窗口的滑动效果,原理是变动层的transform: translate3d(x,y,z),这个以后再讨论。

    不过,淘宝有一个设置了position:fixed的顶部搜索栏。

    这个是独立在fullscreen(那个设置了overflow的层)外的。 所以按住这个在滑动页面,便被视为滑动浏览器窗口,浏览器窗口就会再次出现。

  

  3、<meta content="yes" name="apple-touch-fullscreen">

  苹果设备的safari有一项功能,可以按以下方法,将网页保存到主屏幕,此项meta是设置当这样的情况下,打开时默认全屏。

  

  

<link href="//gw.alicdn.com/tps/i2/TB1nmqyFFXXXXcQbFXXE5jB3XXX-114-114.png" rel="apple-touch-icon-precomposed">

  此行为设置保存到主屏幕时 的图标。

  4、<meta name="data-spm" content="a215s">

  此项meta与移动端无关,是淘宝xTao为外部合作伙伴提供的一套跟踪引导成交效果数据的解决方案。

  简单来说,就是类似cnzz的流量分析系统。

  详细请参考淘宝开放平台:http://open.taobao.com/doc/detail.htm?id=959

  

  5、<meta content="telephone=no,email=no" name="format-detection">

  禁止移动设备将数字识别为手机号码,不识别邮箱

  6、<meta content="fullscreen=yes,preventMove=no" name="ML-Config">

  应该是和第4条一样,为淘宝的自定义meta,用于控制第2条meta中所设定的内容

  7、<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

  本条可以说是移动端必备,用于控制当前页面的缩放比例。

  网上资料很多,不再赘述,找了几个园内的:

  (1)http://www.cnblogs.com/loalongblogs/archive/2011/06/21/2085971.html

  (2)http://www.cnblogs.com/2050/p/3877280.html

  End、结束小宣传

    模板世界(www.templatesy.com),分享、下载最新最全的网站模板。

时间: 2024-08-11 05:36:32

淘宝网触屏版 - 学习笔记(1 - 关于meta)的相关文章

淘宝网触屏版 - 学习笔记(0 - 关于dpr)

注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. 对于pc端网页设计师来说,移动端的网页制作,我之前只是简单的加了一个 <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=none"> 然后再根据实际预览效果,对一些比例或者清晰度问题进行调整,以达到最佳效果.当然

《淘宝技术这十年》读书笔记 (一).淘宝网技术简介及来源

我似乎是2007年初中看<赢在中国>的时候喜欢上马云的,当时对电脑都不是很了解,更别提阿里巴巴和淘宝网了.但当时还是被马云的几句点评深深地吸引,其中我印象最深的一句话就是"短暂的激情是不值钱的,只有长久的激情才是值钱的",以至于我在本科毕业德育答辩时用的题目就是这句话(德育答辩开题我用的题目也是马云的<If not now,when? If not me,who?>其含义是如果不是现在努力,什么时候努力呢?如果不是为了自己奋斗,又是为谁奋斗呢?).的确,想做成任

淘宝小号交易平台常熟淘宝培训 常熟哪里有淘宝网店培训班 学习专业的淘宝知识 像南方教育看齐

公司地址:常熟市招商北路8号天虹服装城a栋705(汽车南站旁) 现在很多新手都疑惑怎么开淘宝店,而且如今淘宝竞争如此之大,如果我此时才进入淘宝大军,还能有市场,还能有机会吗?目前淘宝店铺达到600多万家,要怎么做才能创出一条路呢? 4.1 在线沟通工具 4.3 店铺管理工具 7.2 货物打包 7.3 物流配送 第4章 网店工具的运用 公司地址:常熟市招商北路8号天虹服装城a栋705(汽车南站旁) 7.1 仓储管理 4.4 店内营销工具 8.5 商城日常管理 8.3 商家平台规则 3.2 商品发布

学习开淘宝网店

上周有厂商到公司测试,拿了一块据说很猛的网络处理加速PCIe板卡,拎在手里沉甸甸的很有分量,最让人意淫的是那4个万兆光口,于是我迫不及待的想要一览光口转发时那种看不见的震撼.       可是,仅凭4个光口怎么测试?起码你要有个"对端"啊!任何人应该都不想扛着三台机器在客户们之间跑来跑去测试其转发性能,当然你也不能指望客户那里就一定有你需要的"对端"设备,比如我们公司就没有这种和万兆光口对接的设备,不过赶巧的是,那天还真有一台设备带有万兆光口,但是只是碰巧了.最佳的

淘宝网的质量属性的场景描述

质量属性 可用性 简单介绍 系统应能长期稳定地提供服务,近似7 X 24小时工作强度: 在负载过重或是系统崩溃的情况下,能保证用户请求不丢失: 当系统出现故障或崩溃时,恢复时间不超过两小时: 场景部分 可能的值 刺激源 业务快速发展 刺激 PHP模式易开发.难维护 制品 淘宝的网页 环境 更换技术 相应 改PHP为Java, 改MySql为oracle 相应度量 2004年开始稳定的供其使用 质量属性 可修改性 简单介绍 修改某个子系统或服务时,不影响其他子系统或服务: 场景部分 可能的值 刺激

解密淘宝网的开源架构

解密淘宝网的开源架构 作者:曾宪杰.2002年毕业于浙江大学计算机系.先后在中科院下属企业.先锋电子(中国)就职.积累了丰富的Windows平台.企业级系统设计经验.现任淘宝网平台架构部架构师,主要研究方向为大规模集群环境下的消息中间件设计.分布式数据层和分布式系统. 淘宝网,是一个在线商品数量突破一亿,日均成交额超过两亿元人民币,注册用户接近八千万的大型电子商务网站,是亚洲最大的购物网站.那么对于淘宝 网这样大规模的一个网站,我猜想大家一定会非常关心整个网站都采用了什么样的技术.产品和架构,也

淘宝网采用什么技术架构来实现网站高负载的

2012-11-15 12:30 佚名 转载 字号:T | T 下面就结合淘宝目前的一些底层技术框架以及自己的一些感触来说说如何构建一个可 伸缩,高性能,高可用性的分布式互联网应用. AD: WOT2014:用户标签系统与用户数据化运营培训专场 时间过得很快,来淘宝已经两个月了,在这两个月的时间里,自己也感受颇深.下面就结合淘宝目前的一些底层技术框架以及自己的一些感触来说说如何构建一个可 伸缩,高性能,高可用性的分布式互联网应用. 相关专题:淘宝双11背后高并发技术讨论 一 应用无状态(淘宝se

淘宝双11促销背后高并发处理之淘宝网采用什么技术架构来实现网站高负载

转自:http://china-chill.blog.163.com/blog/static/2049210522012101782432304/ 时间过得很快,来淘宝已经两个月了,在这两个月的时间里,自己也感受颇深.下面就结合淘宝目前的一些底层技术框架以及自己的一些感触来说说如何构建一个可 伸缩,高性能,高可用性的分布式互联网应用. 一 应用无状态(淘宝session框架) 俗 话说,一个系 统的伸缩性的好坏取决于应用的状态如何管理.为什么这么说呢?咱们试想一下,假如我们在session中保存

WebApp触屏版网站开发要点

所谓的触屏版网站其实也是WebApp的一种展示形式,主要是依赖HTML+CSS+Javascript这三个关键因素来实现,相比较原生客户端程序来说优点就是开发周期短.升级简单.维护成本低,因为从根本上来说WebApp的本质就是一个网站而已.这里就说一下如何开发一个适合在触屏设备上展示的页面. 如果有在PC端开发网页的基础那么去处理手机端就很容易上手,这里介绍的是针对手持设备专门处理的页面,而不是媒体查询那种展示方式. 这里提供几个meta属性 使页面不可以认为放大缩小,喜欢用手指捏来捏去的童鞋要