web APP页面适配方案:淘宝H5与网易H5页面对比

这是关于淘宝移动端H5页面和网易移动端H5页面的适配方案的学习。也帮助各位想要学习web APP前端开发发APP设计师普及一些知识点,也让大家快速掌握web APP的页面适配方案。

 

1、跟随25学堂小编来看看网易在不同分辨率下,呈现的效果:

淘宝前端设计 网易前端设计 前端设计教程

淘宝前端设计 网易前端设计 前端设计教程

淘宝前端设计 网易前端设计 前端设计教程

淘宝前端设计 网易前端设计 前端设计教程

从上面几张图可以看出,随着分辨率的增大,页面的效果会发生明显变化,主要体现在各个元素的宽高与间距。375*680的比320*680的导航栏明显要高。能够达到这种效果的根本原因就是因为网易页面里除了font-size之外的其它css尺寸都使用了rem作为单位,比如你看导航栏的高度设置代码:

淘宝前端设计 网易前端设计 前端设计教程

使用rem布局结合在html上根据不同分辨率设置不同font-size有很多不好解决的麻烦,网易是如何解决的呢?

 

最根本的原因在于,网易页面上html的font-size不是预先通过媒介查询在css里定义好的,而是通过js计算出来的,所以当分辨率发生变化时,html的font-size就会变,不过这得在你调整分辨率后,刷新页面才能看得到效果。你看代码就知道为啥font-size是直接写到html的style上面的了(js设置的原因):

淘宝前端设计 网易前端设计 前端设计教程

它是根据什么计算的,这就跟设计稿有关了,拿网易来说,它的设计稿应该是基于iphone4或者iphone5来的,所以它的设计稿竖直放时的横向分辨率为640px,为了计算方便,取一个100px的font-size为参照,那么body元素的宽度就可以设置为width: 6.4rem,于是html的font-size=deviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。根据这个计算规则,可得出本部分开始的四张截图中html的font-size大小如下:

deviceWidth = 320,font-size = 320 / 6.4 = 50px

deviceWidth = 375,font-size = 375 / 6.4 = 58.59375px

deviceWidth = 414,font-size = 414 / 6.4 = 64.6875px

deviceWidth = 500,font-size = 500 / 6.4 = 78.125px

事实上网易就是这么干的,你看它的代码就知道,body元素的宽是:

淘宝前端设计 网易前端设计 前端设计教程

 

 

根据这个可以肯定它的设计稿竖着时的横向分辨率为640。然后你再看看网易在分辨率为320*680,375*680,414*680,500*680时,html的font-size是不是与上面计算的一致:

淘宝前端设计 网易前端设计 前端设计教程

320*680

淘宝前端设计 网易前端设计 前端设计教程

375*680

淘宝前端设计 网易前端设计 前端设计教程

414*680

淘宝前端设计 网易前端设计 前端设计教程

500*680

这个deviceWidth通过document.documentElement.clientWidth就能取到了,所以当页面的dom ready后,做的第一件事情就是:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

这个6.4怎么来的,当然是根据设计稿的横向分辨率/100得来的。

 

下面总结下网易的这种做法:

(1)先拿设计稿竖着的横向分辨率除以100得到body元素的宽度:

如果设计稿基于iphone6,横向分辨率为750,body的width为750 / 100 = 7.5rem

如果设计稿基于iphone4/5,横向分辨率为640,body的width为640 / 100 = 6.4rem

 

(2)布局时,设计图标注的尺寸除以100得到css中的尺寸,比如下图:

淘宝前端设计 网易前端设计 前端设计教程

 

播放器高度为210px,写样式的时候css应该这么写:height: 2.1rem。之所以取一个100作为参照,就是为了这里计算rem的方便!

 

(3)在dom ready以后,通过以下代码设置html的font-size:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

 

6.4只是举个例子,如果是750的设计稿,应该除以7.5。

 

(4)font-size可能需要额外的媒介查询,并且font-size不能使用rem,如网易的设置

  • @media screen and (max-width:321px){
    

        .m-navlist{font-size:15px}

    }

    @media screen and (min-width:321px) and (max-width:400px){

        .m-navlist{font-size:16px}

    }

    @media screen and (min-width:400px){

        .m-navlist{font-size:18px}

    }

     

最后还有2个情况要说明:

第一,如果采用网易这种做法,视口要如下设置:

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

 

第二,当deviceWidth大于设计稿的横向分辨率时,html的font-size始终等于横向分辨率/body元素宽:

淘宝前端设计 网易前端设计 前端设计教程

640*680

淘宝前端设计 网易前端设计 前端设计教程

641*680

之所以这么干,是因为当deviceWidth大于640时,则物理分辨率大于1280(这就看设备的devicePixelRatio这个值了),应该去访问pc网站了。事实就是这样,你从手机访问网易,看到的是触屏版的页面,如果从pad访问,看到的就是电脑版的页面。

如果你也想这么干,只要把总结中第三步的代码稍微改一下就行了:

var deviceWidth = document.documentElement.clientWidth;if(deviceWidth > 640)

deviceWidth = 640;

document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

 

 

2. 淘宝移动端H5的做法

看看淘宝在不同分辨率下,呈现的效果:

淘宝前端设计 网易前端设计 前端设计教程

淘宝前端设计 网易前端设计 前端设计教程

淘宝前端设计 网易前端设计 前端设计教程

淘宝的效果跟网易的效果其实是类似的,随着分辨率的变化,页面元素的尺寸和间距都相应变化,这是因为淘宝的尺寸也是使用了rem的原因。在介绍它的做法之前,先来了解一点关于viewport的知识,通常我们采用如下代码设置viewport:

<meta name="viewport"   content="width=device-width, initial-scale=1,

 maximum-scale=1, user-scalable=no">

这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小,也就是device-width。这个device-width的计算公式为:

设备的物理分辨率/(devicePixelRatio * scale),在scale为1的情况下,device-width = 设备的物理分辨率/devicePixelRatio 。

devicePixelRatio称为设备像素比,每款设备的devicePixelRatio都是已知,并且不变的,目前高清屏,普遍都是2,不过还有更高的,比如2.5, 3 等,我魅族note的手机的devicePixelRatio就是3。淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置:

淘宝前端设计 网易前端设计 前端设计教程

在devicePixelRatio为2的时候,scale为0.5

淘宝前端设计 网易前端设计 前端设计教程

在devicePixelRatio为3的时候,scale为0.3333

这么做目的当然是为了保证页面的大小与设计稿保持一致了,比如设计稿如果是750的横向分辨率,那么实际页面的device-width,以iphone6来说,也等于750,这样的话设计稿上标注的尺寸只要除以某一个值就能够转换为rem了。通过js设置viewport的方法如下:

var scale = 1 / devicePixelRatio;document.queryor('meta[name="viewport"]')

.setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', 

minimum-scale=' + scale + ', user-scalable=no');

淘宝布局的第二个要点,就是html元素的font-size的计算公式,font-size = deviceWidth / 10:

淘宝前端设计 网易前端设计 前端设计教程

接下来要解决的问题是,元素的尺寸该如何计算,比如说设计稿上某一个元素的宽为150px,换算成rem应该怎么算呢?这个值等于设计稿标注尺寸/该设计稿对应的html的font-size。拿淘宝来说的,他们用的设计稿是750的,所以html的font-size就是75,如果某个元素时150px的宽,换算成rem就是150 / 75 = 2rem。

总结下淘宝的这些做法:

(1)动态设置viewport的scale

var scale = 1 / devicePixelRatio;document.queryor('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

(2)动态计算html的font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

(3)布局的时候,各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10

(4)font-size可能需要额外的媒介查询,并且font-size不使用rem,这一点跟网易是一样的。

 

最后还有一个情况要说明,跟网易一样,淘宝也设置了一个临界点,当设备竖着时横向物理分辨率大于1080时,html的font-size就不会变化了,原因也是一样的,分辨率已经可以去访问电脑版页面了。

淘宝前端设计 网易前端设计 前端设计教程

淘宝前端设计 网易前端设计 前端设计教程

 

 

淘宝H5与网易H5页面的比较结果:

淘宝H5与网易H5页面的共同点:

1、都能适配所有的手机设备,对于pad,网易与淘宝都会跳转到pc页面,不再使用触屏版的页面

2、都需要动态设置html的font-size

3、布局时各元素的尺寸值都是根据设计稿标注的尺寸计算出来,由于html的font-size是动态调整的,所以能够做到不同分辨率下页面布局呈现等比变化

4、容器元素的font-size都不用rem,需要额外地对font-size做媒介查询

5、都能应用于尺寸不同的设计稿,只要按以上总结的方法去用就可以了

 

淘宝H5与网易H5页面的适配不同点:

淘宝的设计稿是基于750的横向分辨率,网易的设计稿是基于640的横向分辨率,还要强调的是,虽然设计稿不同,但是最终的结果是一致的,设计稿的尺寸一个公司设计人员的工作标准,每个公司不一样而已

淘宝还需要动态设置viewport的scale,网易不用

最重要的区别就是:网易的做法,rem值很好计算,淘宝的做法肯定得用计算器才能用好了

 

如果想要简单点,直接可以在header里面 加上这一行淘宝的webAPP 适配代码

移动适配一行代码

<script>!(function(c,f){var s=c.document;var b=s.documentElement;var m=s.queryor('meta[name="viewport"]');var n=s.queryor('meta[name="flexible"]');var a=0;var r=0;var l;var d=f.flexible||(f.flexible={});if(m){console.warn("将根据已有的meta标签来设置缩放比例");var e=m.getAttribute("content").match(/initial-scale=([d.]+)/);if(e){r=parseFloat(e[1]);a=parseInt(1/r)}}else{if(n){var j=n.getAttribute("content");if(j){var q=j.match(/initial-dpr=([d.]+)/);var h=j.match(/maximum-dpr=([d.]+)/);if(q){a=parseFloat(q[1]);r=parseFloat((1/a).toFixed(2))}if(h){a=parseFloat(h[1]);r=parseFloat((1/a).toFixed(2))}}}}if(!a&&!r){var p=c.navigator.appVersion.match(/android/gi);var o=c.navigator.appVersion.match(/iphone/gi);var k=c.devicePixelRatio;if(o){if(k>=3&&(!a||a>=3)){a=3}else{if(k>=2&&(!a||a>=2)){a=2}else{a=1}}}else{a=1}r=1/a}b.setAttribute("data-dpr",a);if(!m){m=s.createElement("meta");m.setAttribute("name","viewport");m.setAttribute("content","initial-scale="+r+", maximum-scale="+r+", minimum-scale="+r+", user-scalable=no");if(b.firstElementChild){b.firstElementChild.appendChild(m)}else{var g=s.createElement("div");g.appendChild(m);s.write(g.innerHTML)}}function i(){var t=b.getBoundingClientRect().width;if(t/a>750){t=750*a}var u=t/10;b.style.fontSize=u+"px";d.rem=c.rem=u}c.addEventListener("resize",function(){clearTimeout(l);l=setTimeout(i,300)},false);c.addEventListener("pageshow",function(t){if(t.persisted){clearTimeout(l);l=setTimeout(i,300)}},false);if(s.readyState==="complete"){s.body.style.fontSize=12*a+"px"}else{s.addEventListener("DOMContentLoaded",function(t){s.body.style.fontSize=12*a+"px"},false)}i();d.dpr=c.dpr=a;d.refreshRem=i})(window,window["lib"]||(window["lib"]={}));
</script>

 

完整的淘宝H5适配案例:http://huodong.m.taobao.com/act/yibo.html


每天更新,
全站高品质素材免费下载!