[html5]移动端适配多终手机终端的情况

时间:2017-09-12 08:57酷播

[html5]移动端适配多终手机终端的情况，前面给大家介绍了这个方案目前得到的支持情况以及效果。也扯了不少废话，接下来进入正题吧

测试了Top30的机型。目前未得到支持的：

品牌	型号	系统版本	分辨率	屏幕尺寸	手淘APP	优酷APP	原生浏览器	QQ浏览器	UC浏览器	Chrome浏览器
华为	Mate9	Android7.0	1080 x 1920	5英寸	Yes	Yes	No	Yes	Yes	Yes
华为	Mate7	Android4.2	1080 x 1920	5.2英寸	Yes	Yes	No	Yes	Yes	Yes
魅族	Mx4 (M460 移动4G)	Android4.4.2	1152 x 1920	5.36英寸	Yes	No	No	Yes	Yes	Yes
Oppo	R7007	Android4.3	1280 x 720	5英寸	Yes	No	No	Yes	Yes	No
三星	N9008 (Galaxy Note3)	Android4.4.2	1080 x 1920	5.7英寸	Yes	No	Yes	Yes	Yes	Yes
华硕	ZenFone5(x86)	Android4.3	720 x 280	5英寸	No	No	No	Yes	No	No

Top30机型中不在列表中的，将看到的效果如上图所示。至于敢不敢用，这就得看亲了。必竟第一个吃螃蟹的人是需要一定的勇气！(^_^)

适配方案

前面给大家介绍了这个方案目前得到的支持情况以及效果。也扯了不少废话，接下来进入正题吧。

在移动端布局，我们需要面对两个最为重要的问题：

不同的终端，我们面对的屏幕分辨率、DPR、1px、2x图等一系列的问题。那么这个布局方案也是针对性的解决这些问题，只不过解决这些问题不再是使用Hack手段来处理，而是直接使用原生的CSS技术来处理的。

首要解决的是适配终端。回想一下，以前的Flexible方案是通过JavaScript来模拟vw的特性，那么到今天为止，vw已经得到了众多浏览器的支持，也就是说，可以直接考虑将vw单位运用于我们的适配布局中。

众所周知，vw是基于Viewport视窗的长度单位，这里的视窗（Viewport）指的就是浏览器可视化的区域，而这个可视区域是window.innerWidth/window.innerHeight的大小。用下图简单的来示意一下：

测试了Top30的机型。目前未得到支持的：

品牌	型号	系统版本	分辨率	屏幕尺寸	手淘APP	优酷APP	原生浏览器	QQ浏览器	UC浏览器	Chrome浏览器
华为	Mate9	Android7.0	1080 x 1920	5英寸	Yes	Yes	No	Yes	Yes	Yes
华为	Mate7	Android4.2	1080 x 1920	5.2英寸	Yes	Yes	No	Yes	Yes	Yes
魅族	Mx4 (M460 移动4G)	Android4.4.2	1152 x 1920	5.36英寸	Yes	No	No	Yes	Yes	Yes
Oppo	R7007	Android4.3	1280 x 720	5英寸	Yes	No	No	Yes	Yes	No
三星	N9008 (Galaxy Note3)	Android4.4.2	1080 x 1920	5.7英寸	Yes	No	Yes	Yes	Yes	Yes
华硕	ZenFone5(x86)	Android4.3	720 x 280	5英寸	No	No	No	Yes	No	No

Top30机型中不在列表中的，将看到的效果如上图所示。至于敢不敢用，这就得看亲了。必竟第一个吃螃蟹的人是需要一定的勇气！(^_^)