移動端開發基礎 乾貨分享

移動端開發

我們現在關註的點還在移動M站上，或者我們可以叫做webapp，其實就是運行在移動端瀏覽器中的web網站

app:application應用程式。手機軟體:主要指安裝在智能手機上的軟體，完善原始系統的不足與個性化。

移動端開發是與PC端肯定是有很大不同的，所以我們需要學習如何在移動設備上開發完美適配的app

開發移動端應用我們需要學習的知識點可以分成如下幾個：

1. 移動端佈局適配

2. 移動端事件

3. 移動端交互效果

4. 移動端前端框架

5. 移動端調試

移動端佈局適配

從屏幕尺寸、屏幕類型等方面來看的話，移動設備和PC設備大有不同，所以從佈局、適配等方面都需要我們考慮到

Viewport視口的作用

在很久以前，我們的設備還不是智能設備的時候，設備訪問智能訪問到網頁的左上角（當時都是pc網站），查看全部內容需要通過滾動條

慢慢的我們發現，我們的一個頁面放到移動端中訪問的時候，沒有滾動條了，但是內容都縮小了

這是因為我們有了一個叫做viewport的一個東西

網頁不是直接放入瀏覽器中的，而是先放入到viewport中，然後viewport在等比縮放到瀏覽器的寬度，放入瀏覽器，viewport在縮放的過程中，網頁內容也被縮小了

這樣的話我們需要做一些處理，其實問題的根源在於viewport的寬度和瀏覽器寬度不一樣，如果我們能將其設置為一樣的話，不會出現這樣的問題了

我們可以通過meta標簽來設置viewport將其設置為瀏覽器的寬度，也就是設備的寬度，這樣的話佈局就會簡單多了

viewport的寬度

當瀏覽器寬度小於980的時候，寬度就是980，當瀏覽器尺寸寬度大於980的時候，寬度和瀏覽器寬度一致

通過meta標簽來設置viewport

標簽提供關於 HTML 文檔的元數據。它不會顯示在頁面上，但是對於機器是可讀的。可用於瀏覽器（如何顯示內容或重新載入頁面），搜索引擎（關鍵詞），或其他 web 服務。

meta標簽大全

meta viewport 的6個屬性：

移動端佈局方式與設計圖

現有的佈局方式：

1. 固定佈局，每一個元素都是固定的尺寸，內容區域居中在瀏覽器中間

   內容區域的尺寸：980,1000,1100,1200

2. 響應式佈局，利用媒體查詢來實現不同尺寸的瀏覽器顯示結構不一樣

   一般會有三張設計圖，PC,平板,手機

3. 自適應佈局，屬於響應式里的一種，利用rem、百分比、vwvh等佈局單位來實現

   設計圖一般只有一張，640、750居多

移動端佈局

移動的屏幕和PC的屏幕有一個很大的區別，移動端是視網膜高清屏（Retina）

retina屏幕有一個屬性叫DPR（設備像素縮放比） = 物理像素/邏輯像素

例如，iphone 5s手機商宣傳手機的尺寸是：640寬，這個值就是物理像素，而從開發者眼裡我們所指的其實是320px（邏輯像素）

在dpr為2的手機中，我們的一個邏輯像素會從橫縱兩個方向分別以2個像素點來渲染

如果不管dpr的話，其實我們佈局依然可以，因為我們設置一個像素寬高的東西的話，在手機上看見的基本也就是這麼大，至於手機設備用多少個物理像素去渲染，大小還是不會變化的

設計師出圖都是2倍的，是因為，在頁面中除了字體（矢量圖）大部分都是點陣圖，也就是如果一個像素寬高的盒子里準備放入圖片，如果圖片的尺寸也是一個像素寬高的話，因為其實在移動端渲染的時候是用四個像素來渲染，圖片會失真，但是如果我們給一像素寬高的盒子放入2像素寬高的圖片的話，不就失真

佈局單位

因為我們的移動設備有很多種，所以我們的佈局不可能是固定佈局，所以我們要使用自適應佈局

我們在開發中可以選用很多自適應佈局單位，這些單位必須滿足一個條件

1. %比佈局

   優點：簡單，無需設置，相容性好
   缺點：基於父元素的屬性來設置，如果父元素沒有寬高，設置無效

2. vwvh

   一個vw等於viewport寬度的百分之一，一個vh等於viewport高度的百分之一
   vmax等於vw和vh中較大的那個 vmin等於vw和vh中較小的那個

   優點：簡單，無需設置
   缺點：相容性不好

3. rem

   一個rem等於根元素（html）的字體大小，相容性很好

   優點：相容好，使用簡單
   缺點：需要設置

rem與適配

當我們想使用一個自適應單位的時候，發現%有缺陷，vwvh相容性差，彈性盒所針對的是元素排列的問題，只適用於某種情況，所以我們就想，能給我一個沒啥上面的缺陷的單位，想到了rem

rem的相容性好一點，它也確實是一個佈局單位，不受父子元素的影響，設置了rem之後，也不會對px、em等單位造成影響，它是一個理想的單位

rem也有一個致命的問題，就是它不是一個自適應的單位，不會跟著設備尺寸不同而不同，但是沒有關係，我們有萬能的js，可以去動態的設置它

方法1：

我們可以將1rem設置成屏幕的某一個比例，比如將1rem設置成屏幕的十分之一

假設我們的設計圖是640寬的，我們拿到之後量了一下a的寬度為480px，得到比例a所占屏幕3/4，根據rem與屏幕的關係，最後設置成7.5rem

就是說在設置元素的寬度是時候，會根據設定好的比例關係去進行換算

方法2：

如果設計圖是640的圖，這個時候我們知道它是照著i5來的，我們現在假設世界上所有的手機都是320的，也就是每一個人用的都是i5，在這個理想的情況下，因為手機都一樣，尺寸都一樣，和pc端的固定佈局也就一樣了

假設有一個在640的圖上我們量得的寬度是320，因為是二倍圖，所以我們知道，它的實際寬度是160px，這樣的話，我們直接給這個設置設置width：160px就可以了，這個時候，我們玩個花子，不要單純的使用px來設置，用rem來設置，例如，我可以將rem設置為100px，這樣的，剛纔的盒子設置為width：1.6rem，演算法就是 量的寬度/(dpr*100) = 要設置的rem值

這樣我們就可以開心的開發，量一個尺寸，除個2，再小數點推兩位，設置就性了，但是我們也知道，手機的尺寸並不可能都是320，這樣的話，沒有關係，我們可以根據一個比例來算rem到底設置為多少

在手機寬度為320的時候，我們設置的1rem=100px，所以有一個比例 b = 100/320

那麼在W寬度的手機上，1rem應該是多少呢？設為x 那麼x/w = b

得到x = w/3.2

那麼就不要寫死html的fontsize為100了。而是用js去設置：

document.documentElement.style.fontSize = document.documentElement.clientWidth/3.2 + 'px'

這樣，我們就可以得到一個自適應的rem

方法3：

設計圖如果是640的，我們知道設計的依據屏幕依然是320，假設所有的手機都是320的

有一個div量得320，我們知道它的實際寬度是160，所以我們在css里直接設置160px。佈局就很簡單了，因為量多少，除以2就可以直接設置了

但是手機不能只有這一個尺寸，不過沒關係，我們可以想辦法，我們知道，頁面是放在viewport里的，頁面的寬度就是viewport的寬度，我們在前面的方法會會將viewport通過meta標簽設置為手機屏幕的寬度，但是現在我們就將viewport的寬度強行設置為320px，那麼我們頁面就會認為它的屏幕寬度就是320px，如果是在屏幕寬度不等於320的手機里，viewport也會進行縮放，縮放到手機屏幕大小，但是這個時候，頁面依然認為手機屏幕是320的，也就是說，佈局使用固定佈局，自適應由viewport去做了，讓它將咱們320的頁面縮放到不同尺寸的移動設計，達到表現一致

餓了麽的做法：認為世界的手機都是二倍寬的，然後再調整viewport

常見的需要註意的問題

1. 1px邊框

   在移動端中，如果給元素設置一個像素的邊框的話，那麼在手機上看起來是會比一個像素粗的。

   解決方法：使用偽類元素模擬邊框，使用transform縮放

    .a::after{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: #333;
        position: absolute;
        left: 0;bottom: 0;
        transform: scaleY(0.5)
    }

1. 響應式圖片

   在移動端中，圖片的處理應該是很謹慎的，假設有一張圖片本身的尺寸是X寬，設置和包裹它的div一樣寬，如果是div寬度小於圖片寬度沒有問題，但是如果div寬度大於圖片的寬度，圖片被拉伸失真

   解決方法：讓圖片最大隻能是自己的寬度

   img{
       max-width: 100%;
       display: block;
       margin: 0 auto;
   }

移動端webkit

移動端的瀏覽器的內核百分之99都是webkit內核

移動端事件

移動端中的事件和PC的事件有一些是不同的，例如，mouse部分事件在移動端里沒有了

取而代之的是touch事件：

touchstart/touchmove/touchend/touchcancel

添加事件的時候可以用ontouchstart，但是有的時候很可能失效，建議使用addEventListener的方式

touchcancel比較少見，在系統取消觸摸的時候觸發

touch事件對象裡面的屬性和mouse的略有不同，例如在mouse事件里可以直接從事件對象里取出pageX,clientX,screenX

touch事件對象里有touches,changedTouches,targetTouches三個屬性，上面保存著關鍵的位置信息

它們裡面保存的是觸發事件的手指的信息，但是要註意，雖然三個裡面保存的信息看似都一樣，但是在touchend事件里，只能使用changedTouches

click的300ms延遲問題

在移動端中，click事件是生效的，但是它有一個問題，點擊之後會有300ms的延遲響應

原因：safari是最早做出這個機制的，因為在移動端里，瀏覽器需要等待一段事件來判斷此次用戶操作是單擊還是雙擊，所以就有click300ms的延遲機制，Android也很快就有了

1. 不用click，用自定義事件tap

   tap是需要自定義的：如果用戶執行了touchstart在很短的時間又觸發了touchend，且兩次的距離很小，而且不能觸發touchmove

   使用zepto類庫的時候，裡面自帶tap事件,，但是需要在zepto.js後面加上一段js

   zepto官網;Touch模塊

   百度有一款touch.js的插件教程

   hammar.js也是一個手勢事件庫文檔

2. 引入fastclick庫來解決

點透bug的產生

點透bug有一個特定的產生情況：

當上層元素是tap事件，且tap後消失，下層元素是click事件。這個時候，tap上層元素的時候就會觸發下層元素的click事件

解決方式：

1. 上下層都是tap事件，缺點：a標簽等元素本身就是自帶的click事件，更改為tap比較困難
2. 緩動動畫，讓上層元素消失的時候不要瞬間消失，而是以動畫的形式消失，事件超過300ms就可以了
3. 使用中間層,添加一個透明的中間元素，給它添加click事件並消失，這個時候接收點透的是透明的中間層
4. 使用fastclick

移動端測試

1. 使用chrome瀏覽器有移動設備模擬功能，在這裡可以做一些模擬測試，但是要註意的是，畢竟不是真機，會有一些測試不到的問題

2. 手機連接上電腦的無線，總之使其在同一個網路里，然後就可以通過ip訪問

需要測試的瀏覽器：

chrome，firefox，UC,百度，QQ，微信，Android，safari

移動端交互

動畫效果全部使用css3

JQ生成二維碼

可以使用jquery.qrcode.js插件，可以快速的生成基於canvas繪製的二維碼

相容查閱網站

can i use,在這裡可以查看很多屬性、api的相容性

375/52.08 = X/100 x = 37500/52.08