淘宝网触屏版 - 学习笔记(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),分享、下载最新最全的网站模板。
转载于:https://www.cnblogs.com/w2xh/p/4413696.html
淘宝网触屏版 - 学习笔记(1 - 关于meta)相关推荐
- 淘宝网触屏版 - 学习笔记(0 - 关于dpr)
注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. 对于pc端网页设计师来说,移动端的网页制作,我之前只是简单的加了一个 <meta name=&qu ...
- 手机当当网触屏版开发之旅
新年伊始,首先给大家拜个晚年了! :) "一年之计在于春",回到北京感觉比在家暖和多了.总结回顾去年的工作,就要开始着手新的一年的工作了. 从2011年11月18号开始,在PM.U ...
- 淘宝秒杀脚本(python学习笔记)
淘宝秒杀脚本(python学习笔记) 最近在自学python中,闲的无聊把最近学的内容和查阅的文档资料结合写了个简单的淘宝秒杀脚本,测试结果可以在2s左右完成下单,当然肯定和post方式的秒杀脚本没法 ...
- android用户中心应用,腾讯应用中心触屏版上线 对Android开发者开放
更酷炫的界面,更便捷的读图效果--手机腾讯网触屏版近日给iPhone和Android用户应该留下了深刻的印象.与此同时,全新开发的腾讯应用中心触屏版也同步上线.除了更流畅的触控,它还将通过精品化的推荐 ...
- 基于Android的淘宝网手机客户端开发见解(配完整视频教程讲解)
淘宝网手机客户端是一个基于Android进行应用的项目,通过该客户端实现了注册功能.登陆.分页展示商品列表.能够对商品按名称进行模糊查询.能够对商品进行管理.能够对商品按价格排序.可以查看商品详细信息 ...
- 一个拿到人人网和淘宝网offer的大四学生的Android学习经历
一个拿到人人网和淘宝网offer的大四学生的Android学习经历 本来早就应该整理好的,但是最近一直杂事比较多,现在在家,我家不能上网,在亲戚家用网,总算整理好了.我也着急啊.因为过几天就要去实习了 ...
- 【转】一个拿到人人网和淘宝网offer的大四学生的Android学习经历
qianqianlianmeng http://www.cnblogs.com/aimeng/archive/2011/12/05/2277042.html 本来早就应该整理好的,但是最近一直杂事比较 ...
- 安全购物--快速添加桌面淘宝网快捷方式(win7版)
安全购物,快速在桌面上添加淘宝网快捷方式,方便购物,可以有效避免一不小心输错网址去了不该去的假网址.有效防止上当受骗. 软件下载地址:http://download.csdn.net/detail/u ...
- 手机版淘宝网日问量超3000万 长尾效应明显
还没上手机淘过东西吗?那你真的OUT了. 2010年5月19日,淘宝网无线事业部负责人首次对外透露,手机版淘宝网(m.taobao.com)日访问量已经超过3000万,日交易笔数超过10万,这意味着无 ...
最新文章
- docker dockerfile 映射端口范围 批量映射端口
- delphi使用sqlite数据库时的中文路径问题
- 家装强电弱电布线图_强弱电布线注意事项,强弱电布线的4个讲究!
- vue项目 预览照片的插件 v-viewer
- POJ2421 Constructing Roads 最小生成树
- 硬件基础 —— 电阻
- HDU3534 给你一个树让你找出其中最长路径以及个数数
- java poi 导入日期为空
- redis常用操作-键的生存时间
- 个人博客作业-week5-敏捷开发方法读后感
- CSS 7阶层叠水平
- 程序员代码面试指南:IT名企算法与数据结构题目最优解(第2版) 左程云
- java异步编程书籍_《Java异步编程实战》(翟陆续)【摘要 书评 试读】- 京东图书...
- 投奔“自动驾驶第一城”—— 一场说走就走的“迁都”
- 涉密计算机终端安全防护,终端安全登录与文件保护系统保密认证设备
- 齐次线性方程组系数矩阵的秩与解集的秩
- php cms后台管理系统,Phpcms v9管理后台首页内容自定义修改
- 国内缺少一个slideshare
- 更新TTK失败,请检查网络连接
- 城市信息学其六-信息时代的城市概念化
热门文章
- 如何减少block的数量?也就是减小Namenode的内存压力?
- 我的全栈之路-C语言基础之数据存储
- 2022.5.25 FreeSurfer入门练习:Recon-all
- 给你的亲人一个科技感满满的生日祝福吧
- 保持激昂斗志的18种有效方法
- 基于java毕业设计的汽车销售进销存
- 洞见2021 中国企业服务年会高清大图来啦~!请查收
- 记录:ERROR YarnScheduler: Lost executor 2 on XXX: Container killed by YARN for exceeding memory limits
- Linux搭建waf防火墙,Linux入门教程:nginx安装配置naxsi waf防火墙,nginxwaf Naxsi 不依赖...
- 1025.ws index.php.,程控电话交换机系统局数据和用户数据