移動(dòng)端開發(fā)

我們現(xiàn)在關(guān)注的點(diǎn)還在移動(dòng)M站上缆八，或者我們可以叫做webapp，其實(shí)就是運(yùn)行在移動(dòng)端瀏覽器中的web網(wǎng)站

app:application應(yīng)用程序辱士。手機(jī)軟件:主要指安裝在智能手機(jī)上的軟件契邀，完善原始系統(tǒng)的不足與個(gè)性化。

移動(dòng)端開發(fā)是與PC端肯定是有很大不同的趁曼，所以我們需要學(xué)習(xí)如何在移動(dòng)設(shè)備上開發(fā)完美適配的app

開發(fā)移動(dòng)端應(yīng)用我們需要學(xué)習(xí)的知識(shí)點(diǎn)可以分成如下幾個(gè)：

1. 移動(dòng)端布局適配

2. 移動(dòng)端事件

3. 移動(dòng)端交互效果

4. 移動(dòng)端前端框架

5. 移動(dòng)端調(diào)試

移動(dòng)端布局適配

從屏幕尺寸军浆、屏幕類型等方面來看的話，移動(dòng)設(shè)備和PC設(shè)備大有不同挡闰，所以從布局乒融、適配等方面都需要我們考慮到

Viewport視口的作用

在很久以前，我們的設(shè)備還不是智能設(shè)備的時(shí)候摄悯，設(shè)備訪問智能訪問到網(wǎng)頁的左上角（當(dāng)時(shí)都是pc網(wǎng)站）赞季，查看全部內(nèi)容需要通過滾動(dòng)條

慢慢的我們發(fā)現(xiàn)，我們的一個(gè)頁面放到移動(dòng)端中訪問的時(shí)候奢驯，沒有滾動(dòng)條了申钩，但是內(nèi)容都縮小了

這是因?yàn)槲覀冇辛艘粋€(gè)叫做viewport的一個(gè)東西

網(wǎng)頁不是直接放入瀏覽器中的，而是先放入到viewport中瘪阁，然后viewport在等比縮放到瀏覽器的寬度撒遣，放入瀏覽器，viewport在縮放的過程中管跺，網(wǎng)頁內(nèi)容也被縮小了

這樣的話我們需要做一些處理义黎，其實(shí)問題的根源在于viewport的寬度和瀏覽器寬度不一樣，如果我們能將其設(shè)置為一樣的話豁跑，不會(huì)出現(xiàn)這樣的問題了

我們可以通過meta標(biāo)簽來設(shè)置viewport將其設(shè)置為瀏覽器的寬度廉涕，也就是設(shè)備的寬度，這樣的話布局就會(huì)簡單多了

viewport的寬度

當(dāng)瀏覽器寬度小于980的時(shí)候艇拍，寬度就是980狐蜕，當(dāng)瀏覽器尺寸寬度大于980的時(shí)候，寬度和瀏覽器寬度一致

通過meta標(biāo)簽來設(shè)置viewport

標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)卸夕。它不會(huì)顯示在頁面上馏鹤，但是對(duì)于機(jī)器是可讀的〗慷撸可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面）湃累，搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)碍讨。

meta標(biāo)簽大全

meta viewport 的6個(gè)屬性：

移動(dòng)端布局方式與設(shè)計(jì)圖

現(xiàn)有的布局方式：

1. 固定布局勤婚，每一個(gè)元素都是固定的尺寸，內(nèi)容區(qū)域居中在瀏覽器中間

   內(nèi)容區(qū)域的尺寸：980,1000,1100,1200

2. 響應(yīng)式布局涤伐，利用媒體查詢來實(shí)現(xiàn)不同尺寸的瀏覽器顯示結(jié)構(gòu)不一樣

   一般會(huì)有三張?jiān)O(shè)計(jì)圖馒胆，PC,平板,手機(jī)

3. 自適應(yīng)布局，屬于響應(yīng)式里的一種凝果，利用rem祝迂、百分比、vwvh等布局單位來實(shí)現(xiàn)

   設(shè)計(jì)圖一般只有一張器净，640型雳、750居多

移動(dòng)端布局

移動(dòng)的屏幕和PC的屏幕有一個(gè)很大的區(qū)別，移動(dòng)端是視網(wǎng)膜高清屏（Retina）

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

例如山害，iphone 5s手機(jī)商宣傳手機(jī)的尺寸是：640寬四啰，這個(gè)值就是物理像素，而從開發(fā)者眼里我們所指的其實(shí)是320px（邏輯像素）

在dpr為2的手機(jī)中粗恢，我們的一個(gè)邏輯像素會(huì)從橫縱兩個(gè)方向分別以2個(gè)像素點(diǎn)來渲染

如果不管dpr的話，其實(shí)我們布局依然可以欧瘪，因?yàn)槲覀冊O(shè)置一個(gè)像素寬高的東西的話眷射，在手機(jī)上看見的基本也就是這么大，至于手機(jī)設(shè)備用多少個(gè)物理像素去渲染佛掖，大小還是不會(huì)變化的

設(shè)計(jì)師出圖都是2倍的妖碉，是因?yàn)椋陧撁嬷谐俗煮w（矢量圖）大部分都是位圖芥被，也就是如果一個(gè)像素寬高的盒子里準(zhǔn)備放入圖片欧宜，如果圖片的尺寸也是一個(gè)像素寬高的話，因?yàn)槠鋵?shí)在移動(dòng)端渲染的時(shí)候是用四個(gè)像素來渲染拴魄，圖片會(huì)失真冗茸，但是如果我們給一像素寬高的盒子放入2像素寬高的圖片的話，不就失真

布局單位

因?yàn)槲覀兊囊苿?dòng)設(shè)備有很多種匹中，所以我們的布局不可能是固定布局夏漱，所以我們要使用自適應(yīng)布局

我們在開發(fā)中可以選用很多自適應(yīng)布局單位，這些單位必須滿足一個(gè)條件

1. %比布局

   優(yōu)點(diǎn)：簡單顶捷，無需設(shè)置挂绰，兼容性好
   缺點(diǎn)：基于父元素的屬性來設(shè)置，如果父元素沒有寬高服赎，設(shè)置無效

2. vwvh

   一個(gè)vw等于viewport寬度的百分之一葵蒂，一個(gè)vh等于viewport高度的百分之一
   vmax等于vw和vh中較大的那個(gè) vmin等于vw和vh中較小的那個(gè)

   優(yōu)點(diǎn)：簡單交播，無需設(shè)置
   缺點(diǎn)：兼容性不好

3. rem

   一個(gè)rem等于根元素（html）的字體大小，兼容性很好

   優(yōu)點(diǎn)：兼容好践付，使用簡單
   缺點(diǎn)：需要設(shè)置

rem與適配

當(dāng)我們想使用一個(gè)自適應(yīng)單位的時(shí)候秦士，發(fā)現(xiàn)%有缺陷，vwvh兼容性差荔仁，彈性盒所針對(duì)的是元素排列的問題伍宦，只適用于某種情況，所以我們就想乏梁，能給我一個(gè)沒啥上面的缺陷的單位次洼，想到了rem

rem的兼容性好一點(diǎn)，它也確實(shí)是一個(gè)布局單位遇骑，不受父子元素的影響卖毁，設(shè)置了rem之后，也不會(huì)對(duì)px落萎、em等單位造成影響亥啦，它是一個(gè)理想的單位

rem也有一個(gè)致命的問題，就是它不是一個(gè)自適應(yīng)的單位练链，不會(huì)跟著設(shè)備尺寸不同而不同翔脱，但是沒有關(guān)系，我們有萬能的js媒鼓，可以去動(dòng)態(tài)的設(shè)置它

方法1：

我們可以將1rem設(shè)置成屏幕的某一個(gè)比例届吁，比如將1rem設(shè)置成屏幕的十分之一

假設(shè)我們的設(shè)計(jì)圖是640寬的，我們拿到之后量了一下a的寬度為480px绿鸣，得到比例a所占屏幕3/4疚沐，根據(jù)rem與屏幕的關(guān)系，最后設(shè)置成7.5rem

就是說在設(shè)置元素的寬度是時(shí)候潮模，會(huì)根據(jù)設(shè)定好的比例關(guān)系去進(jìn)行換算

方法2：

如果設(shè)計(jì)圖是640的圖亮蛔，這個(gè)時(shí)候我們知道它是照著i5來的，我們現(xiàn)在假設(shè)世界上所有的手機(jī)都是320的擎厢，也就是每一個(gè)人用的都是i5究流，在這個(gè)理想的情況下，因?yàn)槭謾C(jī)都一樣动遭，尺寸都一樣梯嗽，和pc端的固定布局也就一樣了

假設(shè)有一個(gè)在640的圖上我們量得的寬度是320，因?yàn)槭嵌秷D沽损，所以我們知道灯节，它的實(shí)際寬度是160px，這樣的話，我們直接給這個(gè)設(shè)置設(shè)置width：160px就可以了炎疆，這個(gè)時(shí)候卡骂，我們玩?zhèn)€花子，不要單純的使用px來設(shè)置形入，用rem來設(shè)置全跨，例如，我可以將rem設(shè)置為100px亿遂，這樣的浓若，剛才的盒子設(shè)置為width：1.6rem，算法就是 量的寬度/(dpr*100) = 要設(shè)置的rem值

這樣我們就可以開心的開發(fā)蛇数，量一個(gè)尺寸挪钓，除個(gè)2，再小數(shù)點(diǎn)推兩位耳舅，設(shè)置就性了碌上，但是我們也知道，手機(jī)的尺寸并不可能都是320浦徊，這樣的話馏予，沒有關(guān)系，我們可以根據(jù)一個(gè)比例來算rem到底設(shè)置為多少

在手機(jī)寬度為320的時(shí)候盔性，我們設(shè)置的1rem=100px霞丧，所以有一個(gè)比例 b = 100/320

那么在W寬度的手機(jī)上，1rem應(yīng)該是多少呢冕香？設(shè)為x 那么x/w = b

得到x = w/3.2

那么就不要寫死html的fontsize為100了蛹尝。而是用js去設(shè)置：

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

這樣，我們就可以得到一個(gè)自適應(yīng)的rem

方法3：

設(shè)計(jì)圖如果是640的暂筝，我們知道設(shè)計(jì)的依據(jù)屏幕依然是320，假設(shè)所有的手機(jī)都是320的

有一個(gè)div量得320硬贯，我們知道它的實(shí)際寬度是160焕襟，所以我們在css里直接設(shè)置160px。布局就很簡單了饭豹，因?yàn)榱慷嗌偻依担?就可以直接設(shè)置了

但是手機(jī)不能只有這一個(gè)尺寸，不過沒關(guān)系拄衰，我們可以想辦法它褪，我們知道，頁面是放在viewport里的，頁面的寬度就是viewport的寬度，我們在前面的方法會(huì)會(huì)將viewport通過meta標(biāo)簽設(shè)置為手機(jī)屏幕的寬度驻谆，但是現(xiàn)在我們就將viewport的寬度強(qiáng)行設(shè)置為320px爆雹，那么我們頁面就會(huì)認(rèn)為它的屏幕寬度就是320px绒窑，如果是在屏幕寬度不等于320的手機(jī)里臼膏，viewport也會(huì)進(jìn)行縮放车要，縮放到手機(jī)屏幕大小志衍，但是這個(gè)時(shí)候抬旺，頁面依然認(rèn)為手機(jī)屏幕是320的弊予，也就是說，布局使用固定布局开财，自適應(yīng)由viewport去做了汉柒，讓它將咱們320的頁面縮放到不同尺寸的移動(dòng)設(shè)計(jì)，達(dá)到表現(xiàn)一致

餓了么的做法：認(rèn)為世界的手機(jī)都是二倍寬的责鳍，然后再調(diào)整viewport

常見的需要注意的問題

1. 1px邊框

   在移動(dòng)端中碾褂，如果給元素設(shè)置一個(gè)像素的邊框的話，那么在手機(jī)上看起來是會(huì)比一個(gè)像素粗的薇搁。

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

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

1. 響應(yīng)式圖片

   在移動(dòng)端中，圖片的處理應(yīng)該是很謹(jǐn)慎的啃洋，假設(shè)有一張圖片本身的尺寸是X寬传货，設(shè)置和包裹它的div一樣寬，如果是div寬度小于圖片寬度沒有問題宏娄，但是如果div寬度大于圖片的寬度问裕，圖片被拉伸失真

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

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

移動(dòng)端webkit

移動(dòng)端的瀏覽器的內(nèi)核百分之99都是webkit內(nèi)核

移動(dòng)端事件

移動(dòng)端中的事件和PC的事件有一些是不同的，例如孵坚，mouse部分事件在移動(dòng)端里沒有了

取而代之的是touch事件：

touchstart/touchmove/touchend/touchcancel

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

touchcancel比較少見卖宠，在系統(tǒng)取消觸摸的時(shí)候觸發(fā)

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

touch事件對(duì)象里有touches,changedTouches,targetTouches三個(gè)屬性，上面保存著關(guān)鍵的位置信息

它們里面保存的是觸發(fā)事件的手指的信息扛伍，但是要注意筷畦，雖然三個(gè)里面保存的信息看似都一樣，但是在touchend事件里刺洒，只能使用changedTouches

click的300ms延遲問題

在移動(dòng)端中鳖宾，click事件是生效的，但是它有一個(gè)問題逆航，點(diǎn)擊之后會(huì)有300ms的延遲響應(yīng)

原因：safari是最早做出這個(gè)機(jī)制的鼎文，因?yàn)樵谝苿?dòng)端里，瀏覽器需要等待一段事件來判斷此次用戶操作是單擊還是雙擊因俐，所以就有click300ms的延遲機(jī)制拇惋，Android也很快就有了

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

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

   使用zepto類庫的時(shí)候栏饮，里面自帶tap事件,，但是需要在zepto.js后面加上一段js

   zepto官網(wǎng);Touch模塊

   hammar.js也是一個(gè)手勢事件庫文檔

2. 引入fastclick庫來解決

點(diǎn)透bug的產(chǎn)生

點(diǎn)透bug有一個(gè)特定的產(chǎn)生情況：

當(dāng)上層元素是tap事件磷仰，且tap后消失袍嬉，下層元素是click事件。這個(gè)時(shí)候灶平，tap上層元素的時(shí)候就會(huì)觸發(fā)下層元素的click事件

解決方式：

1. 上下層都是tap事件伺通，缺點(diǎn)：a標(biāo)簽等元素本身就是自帶的click事件，更改為tap比較困難
2. 緩動(dòng)動(dòng)畫逢享，讓上層元素消失的時(shí)候不要瞬間消失罐监，而是以動(dòng)畫的形式消失，事件超過300ms就可以了
3. 使用中間層,添加一個(gè)透明的中間元素瞒爬，給它添加click事件并消失弓柱，這個(gè)時(shí)候接收點(diǎn)透的是透明的中間層
4. 使用fastclick

移動(dòng)端測試

1. 使用chrome瀏覽器有移動(dòng)設(shè)備模擬功能，在這里可以做一些模擬測試侧但，但是要注意的是矢空，畢竟不是真機(jī)，會(huì)有一些測試不到的問題

2. 手機(jī)連接上電腦的無線禀横，總之使其在同一個(gè)網(wǎng)絡(luò)里屁药，然后就可以通過ip訪問

需要測試的瀏覽器：

chrome，firefox柏锄，UC,百度酿箭，QQ，微信趾娃，Android缭嫡，safari

移動(dòng)端交互

動(dòng)畫效果全部使用css3

JQ生成二維碼

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

兼容查閱網(wǎng)站

can i use,在這里可以查看很多屬性抬闷、api的兼容性

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

學(xué)習(xí)前端的同學(xué)們

歡迎加入前端學(xué)習(xí)交流QQ群：461593224