浅谈h5移动端页面的适配问题

时间 2019-11-17

标签浅谈 h5 移动页面适配问题栏目无线繁體版

原文原文链接

1、前言

昨天唠叨了哈没用的，今天说点有用的把。先说一下响应式布局吧，我一直认为响应式布局的分项目，一下布局简单得项目作响应式仍是能够能够得。例如博客、后台管理系统等。可是有些会认为响应式很牛逼，尤为是在不懂前端的人眼中，一味的追求响应式布局，我以为复杂的布局项目作响应式还不如作二套样式，由于响应式的样式混在一块儿真的维护起来是恨费劲的。可能我说的不对，可是发表一点点本身的见解。说道这里就想说一下移动端的布局，有不少人就是想把手机端得程序兼容ipad，我就以为这个很难以想象为何要这么作得，命名手机端的和ipad的设计模式以及操做样式都不同。为何还要把它们弄作一块儿的，维护起来的比较麻烦。还不如作成两套样式或者ipad直接让pc来兼容。pc的设计方式和ipad仍是比较接近的。若是非要用移动的样式稍加改为ipad，我的感受这种方案极很差。不知道你们的见解如何？
接下来我就说一下布局方式吧，目前比较流行的布局方案就是百分表啦。貌似百分之九十以上得触屏版都是这么作得，这种作法能够说是不会出现什么大问题，可是也会有几个小的问题，例如屏幕大的手机和比屏幕小差距之大，尤为是在比价斤斤计较的设计面前你是没法说清楚的，她会一直问，为何这两个手机的布局差距这么大呢？其实我想说，我他妈怎么跟你解释呢。。。此处省略1000个字。在就是布局起来也比较麻烦，真心麻烦。固然确定有更好得方案拉，于彷佛我就想出了一个比较好的解决方案，顶宽布局。css

2、320定宽布局

当时我也想了不少方法，可是一直没有好的解决方案，曾经看了plums的一篇这个博客,当时看完哇塞，这不是正式我想要的嘛。但是尝试了屡次发现这个方法的兼容性有很大的问题。最后仍是放弃拉。因而乎我就开始琢磨，怎么才能更好得兼容全部的机子呢。就想到了缩放，viewport不就干这个的嘛。二话不说就尝试一下viewport里面得一个属性initial-scale,思想很简单，在页面渲染的时候我计算一下手机的宽度，而后我在跟我顶宽布局的宽度一作比较。那么不就能够实现了自动缩放嘛。但是我尝试的结果是，日的，这个属性各个浏览器支持很差。其实我以为若是这个属性你们都能统一的支持，那就是完美的解决方案拉。但是谁让咱们是程序猿呢。只要靠本身吧，要否则jquery也不会诞生。咱们就是要在一个个坑中走过来呀。html

接着就想到了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了。还有一个缺点就是在计算某些元素的高度什么须要一个缩放系数的问题。毕竟有缩放的东西在里面。固然坑仍是有解决方案的，下面就说一下个人顶宽布局最终解决方案。jquery

3、顶宽布局之最终解决方案

为了解决上面布局的坑，我就弄了一个终极的解决方案，这个方案目前确定也有必定的坑，不过貌似不是很大，毕竟没有太多的人反馈。上面的方案也用了好久，目前没有特别大得问题，尤为是在咱们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。于彷佛就解决了大部分得问题。目前这个解决方案对我来讲仍是比较理想的。可能某些地方还有问题。不过也算一种尝试吧，有什么问题你们能够一块儿解决。好了上一个段代码
android

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>

总结一下，这个解决方案目前的缺点。一、css须要编译。二、动态计算的时候必定不要把js里的高度宽什么的写死，必定要动态获取。三、在不支持rem的浏览器上会有问题。目前这也是我想到的最好得解决方案，因为技术水平比较低哈哈。因此代码质量不高，有什么问题你们能够一块儿交流讨论，若是上面代码你们有疑惑能够看一下线上的页面原代码，点击这里，对啦看淘宝的源代码，貌似淘宝的首页是用fontsize缩放解决的。不过没有看到他们是怎么计算的，有空研究一下。不过我以为淘宝首页这个本身实现的滚动条仍是比较牛，至少在咱们公司领导是不容许这么实现的，由于小米3的android机子看了一眼仍是会卡顿。。。。太晚了，要去睡觉啦，若是有错别字什么的你们见谅（语文功底比较差哈哈）。css3