對web移動端開發的一些了解

最近，由于老闆交待下去要準備開發一些移動端頁面出來，作為一個工作以來都是以開發背景管理系統為主的web前端開發人員，我對移動端開發的了解并不多，對于移動端響應式布局，聽過的一些技巧：使用rem代替px、設定viewport和使用flex布局等等，雖然一直有這些概念但畢竟沒有真正動手開發過，是以，就從網上搜尋一些部落格用以加深了解。在閱讀過幾篇文章後，發覺這些文章的描述是缺乏了背景的上下文，讀時候會遇到一些困惑，我就站在我的角度去複述一下對移動端開發的幾點要點吧。

1、關于meta标簽

在移動端開發中，會涉及到meta标簽，這是HTML5裡的元資訊标簽，會告訴浏覽器一些有用的資訊讓浏覽器作出不同于預設的渲染效果，在移動端開發中需要加入一個必備的元資訊：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

這個标簽是讓HMTL文檔的寬度等于裝置的寬度，縮放比例是1，而且不允許使用者自行縮放。

另外的需要加的meta标簽是讓頁面在IOS系統中的手機浏覽器中全屏顯示，加入：

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-touch-fullscreen" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

防止頁面中的數字和郵箱變成連結情況，需要加入：

<meta name="format-detection" content="telephone=no, email=no">

2、devicePixelRatio的了解

devicePixelRatio是裝置像素比的意思，指的是裝置上實體像素和裝置獨立像素的比例。手機的寬高實體像素就是手機參數裡的分辨率的數值，比如：IphoneX像素是2436x1125像素，那麼裝置的橫向有1125個實體像素，裝置的縱向有2436個實體像素。在浏覽器中，通過window.devicePixelRatio擷取裝置像素比的值，IphoneX的devicePixelRatio值為3，那麼裝置的獨立像素是812x375像素，這個像素是css3中的“px”值，例如，要想設定IphoneX中某個元素的寬與文檔寬一樣width設為375px。

3、rem的使用

rem可以用來設定元素的各種尺寸的值，它是以html元素的字型尺寸為準，例如html的字型設為12px，那麼1rem=12px。移動裝置多種多樣，一般設計稿就隻有一套，這一套裝置稿是針對某一個部裝置的，網上用來舉例最多的是iphone6。例如：要設定一個元素寬度與裝置寬度一緻（為了說明，有意不使用百分比），那麼，iphone6的設定是 width: 375px。但是在iphone 6 plus打開就會發現元素的寬度并不等于裝置的寬度。要解決這個問題，在這裡有一種解決思路：用JS動态改變html的字型尺寸，尺寸樣式用機關"rem"代替"px"，當html字型的尺寸改變了，那麼元素的寬度就改變了。

順着上面的思路，假設設計稿是以Iphone6的尺寸設計出來的。我要設定元素的寬度用rem作單元，但是值為多少合适一點呢？網上說到的“網易方案”，用100px為參考，這樣友善看着設計稿不用作為太複雜的計算就可以得出對應的值。Iphone6在設計稿上的寬度應該是750px，那麼我就設定元素的width設為7.5em。要是換到Iphone6 plus裝置上，html的font-size就要改變了，公式應該是 window.screen.availWidth / 375 * 100 / 2(注：window.screen.availWidth是裝置的獨立像素，2是Iphone6的裝置像素比，這裡用到375和2皆因假設設計稿是Iphone6)，是以在文檔加載之後，加入以下的代碼：

document.documentElement.style.fontSize = window.screen.availWidth / 375 * 100 / 2 + 'px';

這樣修改了html字型的尺寸，而不需要修改css的代碼，也不需要用媒體查詢。

網上也提及到一種修改 initial-scale的方式，具體思路也是通過rem實作，隻不過不是改變html的字型尺寸，而是改變縮放的比例，同樣是以Iphone6的設計稿為例，樣式一開始就要加入：

html{
    font-size: calc(100px / 2) ;
}
           

然後用JS改寫meta裡的屬性：

let scale = window.screen.availWidth / 375
 document.querySelector('[name="viewport"]').setAttribute('content', `width=device-width, initial-scale=${scale}, user-scalable=no`)
           

用這種方式實作，會發現最後元素的尺寸數值固定為Iphone6裝置中的像素值，隻是做了元素的顯示縮放。

4、媒體查詢

媒體查詢可以根據不同的裝置加載使用不同的css樣式渲染頁面，這種方式應該結合flex布局，使用百分比作機關，或者結合其它UI架構例如:bootstrap，antd，elementUI等等，這些架構提供了一些内置的類名友善控制不同裝置大小的樣式。