淺談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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。