Web前端如何快速的兼容手机

如何快速的做到手机端的页面兼容


   为什么要写这篇文章

  1. 前段时间做了一个项目,客户要求最低兼容Iphone5S
  2. 在线上运营的项目,客户总是提出兼容很差的问题,之前一直拖着,不曾解决,现在统计处理一下

   学习重点

     lib-flexible插件

 正文


  前端兼容的痛点

      在实际项目开发过程中,作为前段经验并不丰富的后端开发人员,总是会在UI上栽跟头。手机中实际展示效果总是跟模拟器中的展示效果差之千里。

 

举个例子,左边,为我在chrome浏览器中调试的页面,右侧为IPhone5s打开之后的页面效果。

这样的页面,别说客户无法忍受,如果这个页面不是我写的,我必然会找到那个始作俑者,把这个页面的截图狠狠的甩到她脸上,问她,你是怎么做的?这样的页面让客户怎么看,这样的按钮,让用户怎么点,难道想点个累计扫码,一不小心手指稍稍偏了一点儿,页面就关闭了?

作为一个还算合格的后端开发人员。

我保证,我确信,我真的已经努力做了兼容,所有高度都是动态分配,包括页面高度,都由Js根据屏幕可见高度努力算出来,可为什么呈现给用户的效果还会是这样?这样的惨不忍睹。

代码可以分享给大家:

 //获取屏幕的高度
 var screenHeight = window.screen.availHeight;
 //奖项Div距离顶部的高度,为页面总高度的4.5分之一
 $(self._contentPrize).css("margin-top", screenHeight / 4.5);

 //初始化红包弹出框

 //红包Div距离顶部的高度为自己高度的20%
 $("#redPackageContent").css("padding-top", $("#redPackageContent").height() * 0.20);
 //红包金额的Div显示距离顶部为红包页面高度的15%
 $("#redPackageInfo").css("padding-top", $("#redPackageContent").height() * 0.15);
 //红包页面底部的按钮Padding红包页面的高度为红包页面高度的20%
 $("#redPackagebutton").css("padding-top", $("#redPackageContent").height() * 0.20);

这段代码是试出来的最佳高度,可能没有任何逻辑可言。在一塌糊涂的UI面前,程序员的逻辑已被击溃。

刚开始我以为是微信浏览器自带底部导航栏的问题,但,将导航栏的底部高度减去之后,依然无法做到兼容。就算做到兼容主流手机,依然无法保证做到全兼容。

 主流手机的分辨率

       苹果手机:

手机型号手机尺寸分辨率
iPhone 4S3.5寸960 × 640
iPhone 5(5S/5C)4.0寸1136 x 640
iPhone 64.7寸1334 x 750
iPhone 6 Plus5.5寸2208 x 1242 (1920x1080)
iPhone 6S4.7寸1334 x 750
iPhone 6S Plus5.5寸2208 x 1242 (1920x1080)
iPhone SE4寸1136 x 640
iPhone 74.7寸1334 x 750
iPhone 7 Plus5.5寸2208 x 1242 (1920x1080)
iPhone 84.7寸1334 x 750
iPhone 8 Plus5.5寸2208 x 1242 (1920x1080)
iPhone X5.8寸2436 × 1125

       华为手机:

华为P30Pro6.47寸2340×1080
华为 Mate 206.53寸2244×1080
华为畅享9 PLUS6.5寸2340×1080
华为 Mate 20 Pro6.39寸3120x1440
华为P306.1寸2340×1080
华为Nova 46.4寸2310 x 1080 
华为Nova 4e6.15寸2312×1080
华为Nova 56.39寸2340x1080
华为 Mate 20 X7.2寸2244x1080
华为麦芒 86.21寸2340x1080
华为 Mate 20 RS 6.39寸3120x1440
华为畅享9S6.21寸2340x1080
华为畅享96.26寸1520x720
华为 P20 Pro6.1寸2240x1080
华为 nova 5i6.4寸2310×1080
华为畅享 9e6.09寸1560x720
华为 P205.8寸2244×1080
华为 畅享 MAX7.12寸2244×1080
华为 nova 3i6.3寸2340×1080
华为 nova 36.3寸2340 x 1080
华为 mate 10 pro6.0寸2160x 1080
华为 nova 2s6.0寸2160x1080
华为 畅享8e5.7寸1440*720
华为 麦芒76.3寸2340 x 1080
华为 nova 2 Plus5.5寸1920x 1080
华为 畅享8 Plus5.93寸2160x 1080
华为 nova 青春版5.2寸1920x 1080
华为 nova 3e5.84寸2280x1080
华为 Mate 95.9寸1920x1080
华为 畅享7 Plus5.5寸1280x720
华为 P105.1寸1920x1080
华为 麦芒65.9寸2160x1080
华为 P10 Plus5.5寸2560 x 1440
华为 畅享 8e 青春5.45寸1440x72

 lib-flexible插件

   为彻底解决兼容的问题,在众多兼容插件中找到了最适合自己的lib-flexible插件,该插件主要使用rem进行布局。

  1. 前期准备工作
  2. 插件原理

   前期准备工作


   在使用该插件前,我们只需要做两件事情,

   第一,下载 lib-flexible.js文件并引用至我们的项目当中。

   第二,设置viewport,设置代码如下:

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        这样设置的目的在于网页在设备内的页面宽度就会等于逻辑设备像素大小。

 第三,在body中添加如下设置:

<body ontouchstart></body>

插件原理


   lib-flexible插件是基于设备的宽度的像素为基础像素,也就是device-width。在插件中,统一认为设备的宽度为10rem。再根据该设备的宽度像素,计算出1rem所占像素。

 device-width的计算公式为:

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

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

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

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

lib-flexible布局的第二个要点,就是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.querySelector('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。

 最后。lib-flexible设置了一个临界点,当设备竖着时横向物理分辨率大于1080时,html的font-size就不会再变化。

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值