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

<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),分享、下载最新最全的网站模板。

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

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

    注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. 对于pc端网页设计师来说,移动端的网页制作,我之前只是简单的加了一个 <meta name=&qu ...

  2. WebApp触屏版网站开发要点

    所谓的触屏版网站其实也是WebApp的一种展示形式,主要是依赖HTML+CSS+Javascript这三个关键因素来实现,相比较原生客户端程序来说优点就是开发周期短.升级简单.维护成本低,因为从根本上 ...

  3. Tengine是由淘宝网发起的Web服务器项目。它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性

    简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很 ...

  4. 淘宝网购物车jquery源码和网易新用户注册页面表单验证的练习

    淘宝网购物车源码: <html lang="en"> <head> <meta charset="UTF-8"> <t ...

  5. 【原】Learning Spark (Python版) 学习笔记(三)----工作原理、调优与Spark SQL

    周末的任务是更新Learning Spark系列第三篇,以为自己写不完了,但为了改正拖延症,还是得完成给自己定的任务啊 = =.这三章主要讲Spark的运行过程(本地+集群),性能调优以及Spark ...

  6. 离屏渲染学习笔记 /iOS圆角性能问题

    离屏渲染学习笔记 一.概念理解 OpenGL中,GPU屏幕渲染有以下两种方式: On-Screen Rendering 意为当前屏幕渲染,指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行. O ...

  7. 【Head-First设计模式】C#版-学习笔记-开篇及文章目录

    原文地址:[Head-First设计模式]C#版-学习笔记-开篇及文章目录 最近一年断断续续的在看技术书,但是回想看的内容,就忘了书上讲的是什么东西了,为了记住那些看过的东西,最好的办法就是敲代码验证 ...

  8. 解决电脑访问Discuz!手机版(支持触屏版)

    discuz电脑访问手机版的方法现在需要来修改一下2个文件,即可用电脑浏览discuz的手机版本:找到./source/function/function_core.php 文件,查找 : funct ...

  9. 手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 ...

随机推荐

  1. Design and Analysis of Algorithms_Brute Froce

    I collect and make up this pseudocode from the book: <<Introduction to the Design and Analysis ...

  2. Python爬虫爬取百度贴吧的图片

    根据输入的贴吧地址,爬取想要该贴吧的图片,保存到本地文件夹,仅供参考: #!/usr/bin/python#_*_coding:utf-8_*_import urllibimport urllib2i ...

  3. union和union all有什么不同?

    union和union all有什么不同? 相同点:用来获取两个或者两个以上结果集的并集 不同点: union会自动去重,排序 union all没有去重,排序

  4. liunx 远程拷贝到本地

    此句在本地git bash 执行,就能拷贝远程的目录 scp -r  userName@remote:/var/www/views/log/*.* ~/Desktop

  5. 怎样给Myeclipse配置tomcat服务器

    http://jingyan.baidu.com/article/4853e1e53465271909f72690.html Meclipse是java Web企业级开发中最流行的工具,java we ...

  6. [C#开发小技巧]解决WinForm控件TabControl闪烁问题

    在用C#开发WinForm程序时,常发现TabControl出现严重的闪烁问题,这主要是由于TabControl控件在实现时会绘制默认的窗口背景.其实以下一段简单的代码可以有效的缓解该问题的发生.这就 ...

  7. MVC中使用jquery uploadify上传图片报302错误

    使用jquery uploadify上传图片报302错误研究了半天,发现我上传的action中有根据session判断用户是否登录,如果没有登录就跳到登陆页,所以就出现了302跳转错误.原来更新了fl ...

  8. Repeater的Item项绑定DropDownList

    前台页面: <asp:Repeater ID="rptJgtList" runat="server" OnItemDataBound="rptJ ...

  9. ios学习-制作一个浏览图片的Demo

    一.项目要求:制作一个浏览图片的Demo,要求包含夜间模式,以及改变图片大小,能够显示不同的图片描述 二.开发步骤: 1.在storyboard上添加一个空白的View,然后添加”设置“按钮,添加im ...

  10. java异常处理预习

    一.什么是异常处理 在程序运行过程中发生的.会打断程序正常执行的事件称为异常(Exception),也称为例外.比如:除零溢出.数组越界.内存溢出等,这些事件的发生将阻止程序的正常运行.传统的编程语言 ...