移動端的一些tip

開發相關

關于viewport

<meta name="viewport" content="name=value,name=value"> // 指令 每對鍵值對都是一個指令，（ppk 大神的叫法）以下總計共有6對： width設置layout viewport的寬度（css px） initial-scale 設置頁面的初始縮放比例同時可以設置layout viewport的寬度 minimum-scale設置最小縮放比例（指用戶能夠縮小到多小） maximum-scale設置最大縮放比例（指用戶能夠放大到多大） height設置layout viewport的高度，但暫時不怎么被支持 user-scalable設置是否允許用戶放大縮小。

當我們的網頁不使用viewport的時候網頁在移動端顯示的時候基本上看不清楚字體，為什么呢？因為我們將960px（當我們不做設置的時候viewport會自動的把我們的html給規定成980px）的內容壓縮到320dpx（非css單位，在移動端中1px帶至一個最小顯示單位，一屏就是320px）。

解決方案

通過上述的例子我們知道基本上 viewport 的默認寬度是980px，且瀏覽器會將者 viewport 大小的 html 文檔塞進有限的設備寬度內（瀏覽器會動態計算文檔的布局及內容），所以我們看到的東西都很小。
那么我們想要清除的看清文檔內的內容怎么辦 ，沒錯，縮小 viewport 的大小，什么原理？
當我們縮小 viewport 的寬度的時候文檔的寬度也對應的被縮小，即一樣的設備寬度，我顯示的東西少了（這時候瀏覽器重新計算文檔布局及內容）可以看到的結果是字體被放大了，內容都被放大了！

詳細解釋

• [x] width
  可以用width來設置viewport的寬度，以替代那些不合適的默認寬度。我們可以給其設定一個固定大小，但設定成device-width更加明智一些，這樣我們可以兼容不同大小的屏幕。采用了之后就是我們上面所說的效果，雖然是顯示的東西變少了但是我的字體變大了！

• [x] initial-scale
  在移動設備上，用戶有時會縮放，當頁面縮放時，viweport的像素尺寸也會響應的改變，單css尺寸不會變。

  比如，在一個400px寬的Viewport中有一個元素，設定width: 100px;，這時該元素就橫跨了1/4的屏幕。如果用戶把頁面放大到兩倍大小，這時Viewport寬度變成了200px，但元素仍然寬100個CSS像素。這時這個元素就占了半個屏幕了。

滾動方式

頁面的滾動位置分為兩種，一種是滾動body，另一種固定body的高度為100%,在main中滾動。

• 滾動body：頁面的地址會隨著body的滾動隱藏起來，并且在android設備中，滾動body會更加的流暢。(把body設置為overflow就行了)這種情況比較適合長列表頁面，整個頁面除了herder和footer之外都需要滾動，但很多時候我們只希望頁面的某個元素滾動，這個時候就采取第二種布局方式。
• body高度設置為100%：這種方法有許多種實現方式
  • [x] fixed定位 -- 頭部尾部都設置為fixed定位
  • [x] absolute定位
  • [x] flex定位
  這里面也存在一些需要注意的地方，在移動端，如果fixed定位結點后面緊接著跟著興地結點是可滾動的（也就是設置了overflow為true），那么fixed結點會被其后的兄弟結點遮住

fixed 與 input

在移動端開發中，在有input元素的標簽頁中使用fixed定位時會出現一些問題。 在ios上，當點擊input標簽獲取焦點喚起軟鍵盤的時候fixed定位會暫時失效，或者理解為變為了absolute定位，在含有滾動的頁面會和其他結點一起滾動。所以在含有input元素的頁面中使用absolute更好。

compositionstart和compositionend事件

在開發中我們經常要對表單元素進行輸入限制，比如特殊的字符（也有xss的防范功能），我們會監聽input事件。但是，在ios中input事件會截斷非直接輸入，比如：輸入[焦貴彬]中間過程中會輸入拼音，每次輸入一個字母都會觸發input事件，然而在沒有點擊選定按鈕之前都會截斷，也就是會觸發很多次。這時候就需要我們說的兩個事件。

compositionstart 事件在用戶開始進行非直接輸入的時候觸發，而在非直接輸入結束，也即用戶點選候選詞或者點擊「選定」按鈕之后，會觸發 compositionend 事件。

關于性能

使用css3動畫，開啟硬件加速（存在需要注意的地方）

css3動畫會新建一個圖層，另外部分css3動畫會調用GPU，得到性能上的提升.

觸發

• 3d 透視或視圖變換（perspective transform）css屬性
• 使用加速視頻解碼的元素
• 擁有3d（webGL）上下文或2d上下文的元素（carvers）
• 混合插件（如flash）
• 對自己的opacity做css動畫或使用一個動畫webkit變換元素
• 擁有加速 CSS 過濾器的元素
• 元素有一個包含復合層的后代節點(換句話說，就是一個元素擁有一個子元素，該子元素在自己的層里)
• 元素有一個 ** z-index ** 較低且包含一個復合層的兄弟元素(換句話說就是該元素在復合層上面渲染)

上面有提到需要注意一些地方，就是他會將后面的一些不需要新建圖層的元素新建圖層，使性能不僅沒有提升反而出現了一些隱患！

如何來看到css3動畫新建的圖層

在chrome 中選擇open drawer（版本不同會不一樣，有些版本下直接在控制臺的設置中 more tools --> rednering）選擇rendering，然后選擇打開layer boerders ，現在在我們的瀏覽器上就可以看到一些黃色的框框，這個就是我們所謂的復合層，表示被放到了一個新的圖層中渲染。

隱患

注意觸發新建圖層的最后一條，它的意思是如果有一個元素，它的兄弟元素復合層中渲染，而這個兄弟元素的z-index較小，那么這個元素（不管是否應用了硬件式加速）也會被放到復合層中，那么瀏覽器很有可能給復合層之后的所有相對或絕對定位的元素都創建一個復合層來渲染，于是就有了這樣的情形-- 頁面上很多元素都啟用了GPU加速，反而導致了頁面非常的卡頓

解決方案

• 在啟用css3動畫的元素上增加position：relative和z-index：1，這種做法的原理是認為提升動畫元素的z-index，讓瀏覽器知道這個元素的層序，就不會很傻逼的把其他z-index比他高的元素耶弄到復合層中了

• 上面說了一些需要注意的地方，但是總體來說我們還是會采用一些css3的動畫去調用GPU，比如translate-Z：0；可是此時我們并不是要旋轉，這是一種欺騙瀏覽器的行為。此時我們可以關注一下will-change
  ```
  /* 關鍵字值 /
  will-change: auto;
  will-change: scroll-position; // 告知瀏覽器會有滾動
  will-change: contents; // 告知瀏覽器內容或動畫變化了
  will-change: transform; / 示例 /
  will-change: opacity; / 示例 /
  will-change: left, top; / 兩個示例 */

  /* 全局值 */
  will-change: inherit;
  will-change: initial;
  will-change: unset;
  ```

適當的使用touch事件代替click事件

• touch事件觸發的流程：touchstart -> touchmove -> touchend -> click
• 觸發時機：click在dom上手指觸摸開始，且手指未曾在屏幕上移動（某些瀏覽器允許移動一個非常小的值）且在這個在這個dom上手指離開屏幕，且觸摸和離開屏幕之間的間隔時間較短才能觸發。

減少媒體查詢

如果使用的是rem的單位（相當于根元素的字體大小來縮放）因為這樣有兩個明顯的缺點 1.適配屏幕的尺寸不是連續的 2. 在自己的css文件中添加打斷的這樣查詢代碼。增加了css文件的體積。

• 參考淘寶的移動端的頁面適配規則，使用js獲取客戶端的寬度，根據設計稿原型動態計算計算font-size的值

other

• 避免使用css漸變陰影效果
• 不濫用Web字體
  Web字體需要下載，解析，重繪當前頁面，盡量減少使用。

參考

• 餓了么前端
• 張鑫旭博客

轉載于:https://www.cnblogs.com/nanshanlaoyao/p/6675569.html

總結

以上是生活随笔為你收集整理的关于移动端的一些tip的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。