移動端web頁面開發的一些問題

• 2019 年 11 月 28 日
• 筆記

前端涉及到的領域不單單只是PC瀏覽器了，現在是移動為王的時代，所以大部分的時候還是在做移動端的頁面適配。所以這裡記錄一下在移動端開發的時候遇到的一些問題。

1、移動端隱藏手機瀏覽器的地址欄以及底部的菜單欄

在設置移動端頁面的寬高為100%的時候，裡面的元素設置flex:1的時候，因為瀏覽器的地址欄以及下面的工具欄的問題會導致在有的手機上面的頁面顯示不全的問題。因為我們不好計算每一個瀏覽器的地址欄以及工具欄的高度，所以我們直接把它隱藏起來即可，下面的隱藏的程式碼。

<!-- webApp全螢幕顯示，IOS設備 -->  <meta name='apple-mobile-web-app-capable' content='yes' />  <!-- 通用的瀏覽器 -->  <meta name='full-screen' content='true' />  <!-- QQ瀏覽器（X5內核）獨有的META -->  <meta name='x5-fullscreen' content='true' />  <!-- 360瀏覽器獨有的 -->  <meta name='360-fullscreen' content='true' />

2、移動端網頁自適應

在開發網頁的時候適配是一個老生常談的話題。現在的適配基本都是使用的rem布局。而跟標籤（html標籤）的自己大小根據手機的螢幕大小來設置。

<script>    (function (doc, win) {      var docEl = doc.documentElement,          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',          recalc = function () {              var clientWidth = docEl.clientWidth;              if (!clientWidth) return;              if(clientWidth>=640){                  docEl.style.fontSize = '100px';              }else{                  docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';              }          };        if (!doc.addEventListener) return;      win.addEventListener(resizeEvt, recalc, false);      doc.addEventListener('DOMContentLoaded', recalc, false);    })(document, window);  </script>

上面的一段程式碼則是自動修的HTML的跟標籤的字體大小的標籤，然後就可以使用rem來設置元素的寬高了。但是，rem不能設置字體的自適應。

對於我而言，現在都是9102了，vw,vh,vmin,vmax這幾個屬性。來看看can i use上面的兼容性檢測。

其實可以看到還是挺不錯的，Android4.4以上的都是兼容的。所以在9102這個年代了，可以放心大膽的使用了，就算是華為手機自帶的瀏覽器也沒有毛病。關於華為瀏覽器的問題可以查看我的另一篇文章 關於使用react16以上在華為手機上面顯示出現問題的解決方法

關於rem以及vw, vh, vmin, vmax的具體可以查看Rem布局的原理解析。本來想放大漠的文章，今天去看突然就要付費才可以看了。