手机淘宝flexible布局探索及最终方案

相关文章

http://blog.csdn.net/junreycen/article/details/51261653

http://www.html-js.com/article/2402

https://segmentfault.com/a/1190000004403496

https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html?utm_source=tuicool&utm_medium=referral

关于width=device和initial-scale

layout-viewport的宽度就是文档元素HTML的宽度,用docEl.getBoundingClientRect().width计算
浏览器的宽度是基于layout-viewport的宽度比例来的(看网页缩放的情况),由window.innerwidth计算(或者用idea viewport根据缩放比例来算)

width=device作用是让layout-viewport和浏览器宽度保持一致

当不设置width=device时:

1.不设置initial-scale,不设置maximum-scale=x minimum-scale=x,则layout-viewport默认为980px,但是安卓会自动缩放网页使得浏览器宽度和layout宽度一致,此时浏览器宽度也为980px,ios也会自动缩放网页,但是缩放结果依然是大于浏览器宽度

2.不设置initial-scale, 但用maximum-scale=1 minimum-scale=1禁止自动缩放,此时网页无缩放,layout为980px ,浏览器窗口宽度计算结果为idea viewport的宽度。

3.不设置initial-scale,但用maximum-scale=x minimum-scale=x x不等于1 来缩放网页,安卓端,当x<=1/dpr,浏览器宽度和layout-viewport永远为980px ios端当浏览器宽度计算结果>=980px时,layout-viewport会自动变为和浏览器宽度一致。其余情况安卓和ios,layout-viewport为980px

4.设置initial-scale后(maximum-scale=x minimum-scale=x 设置与否,无所谓)
,ios端layout-viewport就会默认和浏览器宽度一致(以idea viewport为基础计算),安卓端 当initial-scale=1时layout-viewport就会和浏览器宽度一致,当initial-scale不等1时,还是和情况3一样
(其实安卓端设置maximum-scale=x minimum-scale=x和设置initial-scale是一回事,都是按照idea viewport为基础缩放网页,iso端设置initial-scale后,layout-viewport就会默认和浏览器宽度一致,并且以idea viewport为基础计算)

当设置width=device时,

1.不设置initial-scale,不设置maximum-scale=x minimum-scale=x,安卓端,layout viewport=idea viewport,浏览器宽度=idea viewport。ios端 ,网页会放大,layout viewport=idea viewport,浏览器宽度小于idea viewport。

2.不设置initial-scale,设置maximum-scale=1 minimum-scale=1,安卓端和ios端一致,layout viewport=idea viewport,浏览器宽度=idea viewport

3,不设置initial-scale,设置maximum-scale=x minimum-scale=x,当x<1时,安卓端和ios端一致,layout viewport=浏览器宽度(用idea viewport根据缩放比例来算),当x>1时,安卓端和ios端一致,layout viewport=idea viewport,浏览器宽度小于layout宽度。

4.设置initial-scale,不设置maximum-scale=x minimum-scale=x,当initial-scale>=1时,安卓端和ios端一致,layout viewport=idea viewport,浏览器宽度=idea viewport
,当1>initial-scale>1/dpr时,安卓端,layout viewport=浏览器宽度(用idea viewport根据缩放比例来算),ios端,layout viewport用idea viewport根据缩放比例来算,浏览器宽度大于或者小于layout宽度。当initial-scale<=1/dpr,安卓端,layout viewport用idea viewport根据缩放比例来算,浏览器宽度小于layout宽度。ios端layout viewport=浏览器宽度(用idea viewport根据缩放比例来算

5.设置initial-scale,设置maximum-scale=x minimum-scale=x,当initial-scale=1,x=1时,安卓端和ios端一致,layout viewport=idea viewport,浏览器宽度=idea viewport
当initial-scale=x<1 时,安卓端和ios端一致layout viewport=浏览器宽度(用idea viewport根据缩放比例来算),当initial-scale=x>1 时layout viewport=idea viewport,浏览器宽度小于idea viewport。

总结:淘宝flexible 采用的方案是,不设置width=device,设置initial-scale=x,maximum-scale=x minimum-scale=x,并且安卓端x=1,ios端x<=3;

rem缩放布局js (在需要添加缩放标签的地方添加一下代码),注意用rem值得行高撑起盒子可能会出现一些高度不正常的现象,解决办法就是height和line-height都写出来
<script>
/*采用flexible方案布局*/
var rem;
var setDpr,scale;
var docEle=document.documentElement;
var browserInfo=window.navigator.userAgent;
var dpr=window.devicePixelRatio;
var isIphone=/iphone/i.test(browserInfo);
var isIOS9_3=isIphone && /OS 9_3/.test(browserInfo);
setDpr = isIphone && !isIOS9_3 ? dpr>= 3 ? 3 : dpr >= 2 ? 2 : 1 : 1;
scale=1/setDpr;
metaEle=document.createElement("meta");
metaEle.name="viewport";
metaEle.content="initial-scale="+scale+" maximum-scale="+ scale + " minimum-scale="+ scale + " user-scalable=no";
if(docEle.firstElementChild){
docEle.firstElementChild.appendChild(metaEle);
}else {
var wrap = document.createElement(‘div‘);
wrap.appendChild(metaEle);
document.write(wrap.innerHTML);
}
function refreshRem() {
var width=docEle.getBoundingClientRect().width;
width=(width/setDpr>540) ? 540*setDpr : width;
rem=width/10;
docEle.style.fontSize=rem+"px";
docEle.setAttribute(‘data-dpr‘, setDpr);
}
refreshRem();
</script>

原文地址:https://www.cnblogs.com/mei123/p/8467192.html

时间: 2024-10-18 14:08:46

手机淘宝flexible布局探索及最终方案的相关文章

Android热补丁技术—dexposed原理简析(手机淘宝采用方案)

本文由嵌入式企鹅圈原创团队成员.阿里资深工程师Hao分享. 上篇文章<Android无线开发的几种常用技术>我们介绍了几种android移动应用开发中的常用技术,其中的热补丁正在被越来越多的开发团队所使用,它涉及到dalvik虚拟机和android的一些核心技术,现在就来介绍下它的一些原理. 本篇先介绍dexposed方案:https://github.com/alibaba/dexposed,它是手机淘宝团队使用的热补丁方案,后来开源到github上,取的名字dexposed表明了自己是基于

手机淘宝 521 性能优化项目揭秘

又是一年双十一,亿万用户都会在这一天打开手机淘宝,高兴地在会场页面不断浏览,面对琳琅满目的商品图片,抢着添加购物车,下单付款.为了让用户更顺畅更方便地实现这一切,做到“如丝般顺滑”,双十一前夕手机淘宝成立了“521”(我爱你)性能优化项目,在日常优化基础之上进行三个方面的专项优化攻关,分别是1)H5页面的一秒法则:2)启动时间和页面帧率提升20%:3)Android内存占用降低50%.优化过程中遇到的困难,思考后找寻的方案,实施后提取的经验都会在下面详细地介绍给读者. 第一章 一秒法则的实现 “

淘宝弹性布局方案lib-flexible研究

1. lib-flexible不能与响应式布局兼容 先说说响应式布局的一些基本认识: 响应式布局的表现是:网页通过css媒介查询判断可视区域的宽度,在不同的范围应用不同的样式,以便在不同尺寸的设备上呈现最佳的界面效果.典型的例子是,有一个商品列表页,应用响应式布局后,可能在pc上是用4列展示,在平板上用3列展示,在手机上只用1列展示.这种布局的最大好处就是节省人力.资源和时间,所以很多公司都喜欢用.而响应式布局有两个必须的要求: 1)是viewport的设置,width跟initial-scal

高效、稳定、可复用——手机淘宝主会场框架详解

导读: 为了让消费者在大促时能更快挑选到商品和进行平台的营销互动,手机淘宝都会有一个页面来承载大促的核心内容和主要的营销要素,称之为主会场.本文重点分享 了从技术和业务上如何提升主会场效能,将浏览体验做到最优,让用户能够更快地找到自己感兴趣的内容,提高转化率,应对任何业务变化,保障大促的顺利进行. 每次为了让消费者在大促时能更快挑选到商品和进行平台的营销互动,都会有一个页面来承载大促的核心内容和主要的营销要 素,我们称之为主会场.以前主会场开发,都是前端通过页面搭建系统或者以源码方式制作PC页面

电商客户端竞品分析-手机淘宝、京东、唯品会、聚美优品

市场状况 艾瑞最新统计数据显示,2013年移动网购整体交易规模1676.4亿元,同比增幅高达165.4%,而同期PC端网购规模将近16000多亿元,同比增速35.7%.预计2017年市场规模将近万亿,增速39.4%. 图1 2011-2017年中国移动购物市场交易规模 2013年中国移动网购渗透率9.1%,同比去年增长超过四个百分点.预计到2017年移动购物渗透率达到24.1%. 图2 2011-2017年中国网购交易额PC端和移动端占比 2013年移动网购企业份额中,手机淘宝占比76.1%,京

手机淘宝Android客户端架构

手机淘宝Android客户端有几百人开发,十几个团队.如果整个Android客户端是一个工程,那十几个团队每个人上午上班第一件事情估计就是合代码,运气不好,一天都在合代码,而且只要有一个人提交的代码编译不过,所有人都会被堵塞在那里,所以单个工程是不可能的事情. 只要是包含了很多业务的客户端,都会面临这个问题,各个业务代码量越来越多,新需求又源源不断的来,业务团队之间要是有直接依赖,那被依赖最多的团队成员,在改代码的时候都是战战兢兢的,生怕自己的改动导致其他业务奔溃.最终交付的时候,总会被一个业务

《转》冯森林:手机淘宝中的那些Web技术(2014年)

Native APP与Web APP的技术融合已经逐渐成为一种趋势,使用标准的Web技术来开发应用中的某些功能,不仅可以降低开发成本,同时还可以方便的进行功能迭代更新.但是如何保证Web APP的流畅性也一直是业内讨论的热点.InfoQ此次专访了手机淘宝客户端高级技术专家冯森林来谈谈手机淘宝在Web技术方面的一些实践经验,另外作为ArchSummit深圳2014大会<移动互联网,一浪高过一浪>专题的讲师,冯森林将会分享 手机淘宝的客户端架构探索之路 . InfoQ:淘宝手机客户端是否使用了HT

手机淘宝构架演化实践

2014年12月19日~20日,ArchSummit北京2014大会顺利举行.“移动互联网,随时随地”是非常火爆的一个专题.阿里无线事业部技术负责人庄卓然(花名南天)任出品人.来自阿里无线事业部的高级专家李敏(花名心石,微博:@allblue_华丽地低调 )分享了<手机淘宝架构演化实践>(幻灯片下载). 李敏主要负责淘宝无线客户端和无线网站基础服务.购物主链路的架构.研发方面的工作.从09年开始参与手机淘宝研发团队的组建和线上产品研发,先后负责过无线部门的社区.会员.营销.交易等多条产品线的技

手机淘宝推荐中的排序学习

原文:http://yq.aliyun.com/articles/122?spm=0.0.0.0.oL8bTY 周梁:淘宝推荐机器学习技术专家,中国科学院自动化研究所机器学习博士,主要研究工作方向是机器学习.大规模并行算法优化.先后从事过广告CTR预估,MPI机器学习平台搭建,手淘个性化推荐等多方面工作. 排序学习是推荐.搜索.广告的核心问题.在手机淘宝的推荐场景中,受制于展示空间的限制,排序学习显得尤为重要.在淘宝,如何从十亿的商品中,挑选出用户 今天喜欢的商品,也是个巨大的挑战. 本次我们分