浅谈h5移动端页面的适配问题
一、前言
昨天唠叨了哈没用的，今天说点有用的把。先说一下响应式布局吧，我一直认为响应式布局的分项目，一下布局简单得项目做响应式还是可以可以得。例如博客、后台管理系统等。但是有些会认为响应式很牛逼，尤其是在不懂前端的人眼中，一味的追求响应式布局，我觉得复杂的布局项目做响应式还不如做二套样式，因为响应式的样式混在一起真的维护起来是恨费劲的。可能我说的不对，但是发表 一点点自己的看法。说道这里就想说一下移动端的布局，有很多人就是想把手机端得程序兼容ipad，我就觉得这个很不可思议为什么要这么做得，命名手机端的和ipad的设计模式以及操作样式都不一样。为什么还要把它们弄做一起的，维护起来的比较麻烦。还不如做成两套样式或者ipad直接让pc来兼容。pc的设计方式和ipad还是比较接近的。如果非要用移动的样式稍加改成ipad，个人感觉这种方案极不好。不知道大家的看法如何？
接下来我就说一下布局方式吧，目前比较流行的布局方案就是百分表啦。貌似百分之九十以上得触屏版都是这么做得，这种做法可以说是不会出现什么大问题，但是也会有几个小的问题，例如屏幕大的手机和比屏幕小差距之大，尤其是在比价斤斤计较的设计面前你是无法说清楚的，她会一直问，为什么这两个手机的布局差距这么大呢？其实我想说，我他妈怎么跟你解释呢。。。此处省略1000个字。在就是布局起来也比较麻烦，真心麻烦。当然肯定有更好得方案拉，于似乎我就想出了一个比较好的解决方案，顶宽布局。
二、320定宽布局
当时我也想了很多方法，但是一直没有好的解决方案，曾经看了plums的一篇这个博客,当时看完哇塞，这不是正式我想要的嘛。可是尝试了多次发现这个方法的兼容性有很大的问题。最后还是放弃拉。于是乎我就开始琢磨，怎么才能更好得兼容所有的机子呢。就想到了缩放，viewport不就干这个的嘛。二话不说就尝试一下viewport里面得一个属性initial-scale,思想很简单，在页面渲染的时候我计算一下手机的宽度，然后我在跟我顶宽布局的宽度一做比较。那么不就可以实现了自动缩放嘛。可是我尝试的结果是，日的，这个属性各个浏览器支持不好。其实我觉得如果这个属性大家都能统一的支持，那就是完美的解决方案拉。可是谁让我们是程序猿呢。只要靠自己吧，要不然jquery也不会诞生。我们就是要在一个个坑中走过来呀。
接着就想到了scale哈哈，css3里面得缩放，不过后来发现用这个字体什么的会虚掉。所以想起了zoom属性，从这可以看出来我也是干过pc的，当时的ie6的清楚浮动有一种方式就需要加一个zoom为0，这个就不错嘛。话说回来了。这个在nativeapp里还是没有太大问题得。不过还是有一点小坑，就是计算margin以及scroll的时候就出来个缩放系数的问题。不过还好，只要你把常用的组件写好除以或者乘以这个缩放系数就可以搞定啦哈哈。这种方式就可以解决小伙伴们百分比布局的痛苦拉。尤其是不用去计算那些百分值多少百分值多少拉。废话不说啦，上代码，
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 5 <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6 <meta name="format-detection" content="telephone=no"/> 7 <title>GreatBoy</title> 8 <style> 9 /*-----css Reset end-----*/ 10 body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{ 11 margin:0; 12 padding:0px; 13 } 14 body{ 15 font-family: "Arial"; 16 font-size: 100%; 17 margin: 0px auto; 18 display: none; 19 } 20 #wrapper{ 21 width:320px; 22 margin: 0px auto; 23 position: relative; 24 } 25 /*-----css content start-----*/ 26 27 .nav img{ 28 width:100%; 29 display: block; 30 } 31 32 </style> 33 </head> 34 <body> 35 <div id="wrapper"> 36 <div class="nav"><img src="http://p1.jmstatic.com/banner/75/mobile_app/24326_0.jpg"/></div> 37 <div id="container"> 38 <div id="user">用户信息<span id="userinfo"></span></div> 39 </div> 40 </div> 41 <script> 42 (function() { 43 var scale = 1, 44 $wrapper = document.getElementById(‘wrapper‘), 45 $body = document.getElementsByTagName(‘body‘)[0], 46 windowWidth = document.documentElement && document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth, 47 windowHeight = document.documentElement && document.documentElement.clientHeight || documentElement.body.clientHeight || window.innerHeight, 48 deviceAgent = navigator.userAgent.toLowerCase(), 49 setScale = function(scales) { 50 if ($wrapper.style.zoom === undefined) { 51 $wrapper.style.margin = ‘0px‘; 52 $wrapper.style.transformOrigin = ‘top left‘; 53 $wrapper.style.transform = ‘scale(‘ + scales + ‘)‘; 54 $wrapper.style.MozTransformOrigin = ‘top left‘; 55 $wrapper.style.MozTransform = ‘scale(‘ + scales + ‘)‘; 56 } else { 57 $wrapper.style.zoom = scales; 58 } 59 $body.style.display = ‘block‘; 60 } 61 62 try { 63 if (deviceAgent.match(/(iphone|ipod|android|windows\s*phone|symbianos)/)) { 64 if (window.localStorage && window.localStorage.getItem(‘scale_jumei‘)) { 65 scale = window.localStorage.getItem(‘scale_jumei‘); 66 } else { 67 scale = parseFloat(windowWidth / 320); 68 if (windowHeight > windowWidth) { 69 window.localStorage && window.localStorage.setItem(‘scale_jumei‘, scale); 70 } 71 } 72 //微信2.3版本的处理(2.3版本有一个bug就是获取宽度不准确) 73 if (deviceAgent.match(/android\s*2.3/) && deviceAgent.match(/micromessenger/)) { 74 scale = 1; 75 } 76 if ($wrapper) { 77 setScale(scale); 78 } 79 } 80 } catch (e) { 81 scale = parseFloat(windowWidth / 320); 82 if ($wrapper) { 83 setScale(scale); 84 } 85 } 86 })(); 87 </script> 88 </body> 89 </html>
上面代码很简单大家一看就懂。这种方式做一个简单的页面以及平时做些活动啥得是没问题的。也不需要在算百分比是多少啦，直接写死宽度320布局就好啦，先说一下我得布局方式，就是让设计做640的图片。然后我们布局按照320来做就好，图标什么的让设计出2x图或者3x图，也就是做2倍icon或者3倍icon。2倍的icon目前在6plus上面还是会有点虚得。所以可以选择3倍的icon，毕竟图标什么的也不是太大。说一下这种方法的缺点吧。缺点是有的浏览器不支持zoom属性，例如火狐，那就只能用scale了。还有一个缺点就是在计算某些元素的高度什么需要一个缩放系数的问题。毕竟有缩放的东西在里面。当然坑还是有解决方案的，下面就说一下我的顶宽布局最终解决方案。
三、顶宽布局之最终解决方案
为了解决上面布局的坑，我就弄了一个终极的解决方案，这个方案目前肯定也有一定的坑，不过貌似不是很大，毕竟没有太多的人反馈。上面的方案也用了很久，目前没有特别大得问题，尤其是在我们app里面没有出现过重大事故。
接着说一下最终方案，就是通过font-size缩放，这需要用到一个rem的尺寸，大家没事网上一搜就知道了。这个1rem目前等于16px，那么我上面的320布局岂不是可以搭建成宽度为20rem的尺寸，然后我里面所有的元素都可以用rem来代替px。这样我不就可以通过在html上font-size进行缩放了嘛,其实就是这样做的就ok。这里有一个转换，就是要把css里面的px按照1rem = 16px的规则都替换成rem。这样就ok了。这个方案目前的缺点就是需要编译一下css样式和不允许你写内联样式，不允许写内联样式的主要原因是要不你html也得进行编译替换拉。目前我们得解决方案是在开发的时候我们还是按照320的布局方案来走。等发布到线上的时候做一个整体的gulp构建px替换成rem。于似乎就解决了大部分得问题。目前这个解决方案对我来说还是比较理想的。可能某些地方还有问题。不过也算一种尝试吧，有什么问题大家可以一起解决。好了上一个段代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 5 <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6 <meta name="format-detection" content="telephone=no"/> 7 <title>GreatBoy</title> 8 <style> 9 /*-----css Reset end-----*/ 10 body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{ 11 margin:0; 12 padding:0px; 13 } 14 html{ 15 display: none; 16 } 17 18 .nav img{ 19 width:10rem; 20 } 21 22 </style> 23 </head> 24 <body> 25 <div class="nav"><img src="http://p1.jmstatic.com/banner/75/mobile_app/24326_0.jpg"/></div> 26 <div id="container"> 27 <div id="user">用户信息<span id="userinfo"></span></div> 28 </div> 29 <script> 30 (function(win) { 31 var doc = win.document, 32 scale = 16, 33 $body = doc.getElementsByTagName(‘body‘)[0], 34 $html = doc.getElementsByTagName(‘html‘)[0], 35 windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerWidth, 36 windowHeight = document.documentElement && document.documentElement.clientHeight || documentElement.body.clientHeight || window.innerHeight, 37 deviceAgent = navigator.userAgent.toLowerCase(); 38 if ( deviceAgent.match( /(iphone|ipod|ipad|android|windows\s*phone|symbianos)/ ) ) { 39 try{ 40 if ( window.localStorage && window.localStorage.getItem(‘scale_greatboy‘) ) { 41 scale = window.localStorage.getItem(‘scale_greatboy‘); 42 } else { 43 scale = parseFloat(windowWidth * 16 / 320); 44 if (windowHeight > windowWidth) { 45 window.localStorage && window.localStorage.setItem(‘scale_greatboy‘, scale); 46 } 47 } 48 }catch(e){ 49 50 } 51 if (deviceAgent.match(/android\s*2.3/) && deviceAgent.match(/micromessenger/)) { 52 scale = 16; 53 } 54 $html.style.fontSize = scale + ‘px‘; 55 $html.style.display = ‘block‘; 56 } else { 57 window.onresize = function(){ 58 windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerWidth; 59 scale = parseFloat(windowWidth * 16 / 320); 60 $html.style.fontSize = scale + ‘px‘; 61 }; 62 scale = parseFloat(windowWidth * 16 / 320); 63 $html.style.fontSize = scale + ‘px‘; 64 $html.style.display = ‘block‘; 65 } 66 $body.style.width = ‘20rem‘; 67 })(window); 68 </script> 69 </body> 70 </html>
总结一下，这个解决方案目前的缺点。1、css需要编译。2、动态计算的时候一定不要把js里的高度宽什么的写死，一定要动态获取。3、在不支持rem的浏览器上会有问题。 目前这也是我想到的最好得解决方案，由于技术水平比较低哈哈。所以代码质量不高，有什么问题大家可以一起交流讨论，如果上面代码大家有疑惑可以看一下线上的页面原代码，点击这里，对啦看淘宝的源代码，貌似淘宝的首页是用fontsize缩放解决的。不过没有看到他们是怎么计算的，有空研究一下。不过我觉得淘宝首页这个自己实现的滚动条还是比较牛，至少在我们公司领导是不允许这么实现的，因为小米3的android机子看了一眼还是会卡顿。。。。太晚了，要去睡觉啦，如果有错别字什么的大家见谅（语文功底比较差哈哈）。