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

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

为什么要写这篇文章

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

学习重点

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 4S	3.5寸	960 × 640
iPhone 5（5S/5C）	4.0寸	1136 x 640
iPhone 6	4.7寸	1334 x 750
iPhone 6 Plus	5.5寸	2208 x 1242 (1920x1080)
iPhone 6S	4.7寸	1334 x 750
iPhone 6S Plus	5.5寸	2208 x 1242 (1920x1080)
iPhone SE	4寸	1136 x 640
iPhone 7	4.7寸	1334 x 750
iPhone 7 Plus	5.5寸	2208 x 1242 (1920x1080)
iPhone 8	4.7寸	1334 x 750
iPhone 8 Plus	5.5寸	2208 x 1242 (1920x1080)
iPhone X	5.8寸	2436 × 1125

华为手机：

华为P30Pro	6.47寸	2340×1080
华为 Mate 20	6.53寸	2244×1080
华为畅享9 PLUS	6.5寸	2340×1080
华为 Mate 20 Pro	6.39寸	3120x1440
华为P30	6.1寸	2340×1080
华为Nova 4	6.4寸	2310 x 1080
华为Nova 4e	6.15寸	2312×1080
华为Nova 5	6.39寸	2340x1080
华为 Mate 20 X	7.2寸	2244x1080
华为麦芒 8	6.21寸	2340x1080
华为 Mate 20 RS	6.39寸	3120x1440
华为畅享9S	6.21寸	2340x1080
华为畅享9	6.26寸	1520x720
华为 P20 Pro	6.1寸	2240x1080
华为 nova 5i	6.4寸	2310×1080
华为畅享 9e	6.09寸	1560x720
华为 P20	5.8寸	2244×1080
华为畅享 MAX	7.12寸	2244×1080
华为 nova 3i	6.3寸	2340×1080
华为 nova 3	6.3寸	2340 x 1080
华为 mate 10 pro	6.0寸	2160x 1080
华为 nova 2s	6.0寸	2160x1080
华为畅享8e	5.7寸	1440*720
华为麦芒7	6.3寸	2340 x 1080
华为 nova 2 Plus	5.5寸	1920x 1080
华为畅享8 Plus	5.93寸	2160x 1080
华为 nova 青春版	5.2寸	1920x 1080
华为 nova 3e	5.84寸	2280x1080
华为 Mate 9	5.9寸	1920x1080
华为畅享7 Plus	5.5寸	1280x720
华为 P10	5.1寸	1920x1080
华为麦芒6	5.9寸	2160x1080
华为 P10 Plus	5.5寸	2560 x 1440
华为畅享 8e 青春	5.45寸	1440x72

lib-flexible插件

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

前期准备工作
插件原理

前期准备工作

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

第一，下载 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。总结下淘宝的这些做法：

动态设置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');

动态计算html的font-size

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

布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
font-size可能需要额外的媒介查询，并且font-size不使用rem。

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

Web前端如何快速的兼容手机相关推荐

Web前端视频学习笔记（手机初稿）
HTML+CSS系列教程目录一.拨云见日 HTML CSS 切图流程 PC企业站布局 PC游戏站布局二.溯本求源扩展HTML 扩展CSS HTMLS新语法 CSS3新语法兼容与hack 三. ...
web前端中快速切换图片实现视频播放效果
在前端界面中有video组件可以直接播放下载到的视频,也可以通过video.js来显示rtmp等流媒体,实现实时画面的效果.当我们为了保证实时的效果,在将实时视频进行一帧一帧的检测之后,再合成视频,然 ...
Web前端开发之浏览器兼容问题
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果di ...
Web前端工作笔记012---IE8兼容_WebSocket
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 ie8不支持websoket,需要用: WebSocketMain.swf 这个文件去后台请求84 ...
Web前端工作笔记010---IE8兼容_IE8不能使用foreach_indexOf的解决方案
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 关于IE不能使用foreach问题,需要使用前引入以下代码: 相当于给array扩展了一个fore ...
Web前端工作笔记009---IE8兼容_new Date兼容方法
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 往后台传时间时,IE8不能用new Date(日期时间字符串) 改用:convertDateTie ...
Web前端期末大作业-在线手机商城网站设计（HTML+CSS+JS）
web前端需要学习什么？需要掌握什么技术
1.Web前端是什么意思 Web前端是网站前台部分,运行在PC端,移动端等浏览器上展现给用户所浏览的网页. 用我们的话来说,前端就是网页给访问网站的人看的内容和页面,Web前端开发意思就是这些内容的制 ...
web前端培训学习之加速Web开发
Node.js有几个框架,使web应用程序开发更加方便和高效.让我们来看看一些最强大的Node.js框架,它们可以为你的客户加速web应用程序开发.想学习Node.js框架的小伙伴可以参加千锋重庆We ...

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

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

正文

Web前端如何快速的兼容手机相关推荐

最新文章

热门文章