移动端”宴席知多少
轉載(http://adt.aicai.com/index.php/archives/179/)
瞎折騰移動端的項目已經很長一段時間了，并不像其它企業(yè)一樣，可以有項目組去完成，基本都是一個人瞎嘗試，時而web，時而web app。恍恍惚惚過了這段歲月，也不曉得自己忙了啥。總叫別人去總結，讓別人學會總結，也該為自己總結總結了。也為了團隊之間更好的知識共享吧。如何開發(fā) 移動端就跟如何上菜一樣，上菜有規(guī)則，先冷后熱，先菜后點，先咸后甜，先炒后燒等等。按照一定的程序來才能恰到好處地掌握。那么，現在還是上菜吧，客官等 久了... ...
前菜（涼菜，冷盤）
一、移動端開發(fā)與PC端開發(fā)不同
大家都知曉，手機種類千千萬，也導致移動端開發(fā)面對的屏幕尺寸是各種頭疼。
Web：固定布局和彈性布局
Web app：響應式布局
二、調試工具
firefox的響應式設計視圖:Firefox 瀏覽器內置了?自定義設計視圖?的功能，可以通過?Firefox->Web 開發(fā)者->自定義設計視圖（或者摁下?Shift + Ctrl + m?）。相比網絡工具，運行更加流暢，無需聯網。
Chrome開發(fā)，chrome瀏覽器也有個Emulation，如圖：
另外，就是設備上的調試，方法很多。
1. 直接把做好的靜態(tài)頁面放到手機用瀏覽器打開查閱
2. 在本地搭建環(huán)境，比如php環(huán)境，局域網訪問ip查閱頁面（有搭建過博客的都知道）
3. 遠程調試
A:Android 設備 Chrome 遠程調試
B:uc瀏覽器開發(fā)者調試
開胃湯
那么，問題來了，移動端開發(fā)到底該如何下手？
1．關于viewport
- a)概念：設備的pixels和css的pixels（總體而言，你只需要關注CSS的pixels，這些pixels指定你的樣式被如何渲染。
） - b)概念：視窗 viewport（viewport的功能在于控制你網站的最高塊狀（block）容器：<html>元素。 ）
下面是link的一些用法，但是移動端也好web端也好，為了減少HTTP請求數， 個人建議最好能使用媒體查詢來解決的可以盡可能的用媒體查詢。
媒體查詢如下：
頭菜
作為頭菜，一般宴會來說，頭菜是代表性的菜點。那么說到移動端呢？
-
移動端的reset
時過境遷，Reset 逐漸淡出的前沿前端的視野，normalize.css?取 而代之。normalize.css，統(tǒng)一樣式的同時保留可辨識性；reset 統(tǒng)一樣式，完全沒有可讀性，破壞原有標簽的語義化。針對每個項目的不同，各自可以基于Normalize.css，根據目前我們大家的使用習慣進行了一些 清零及移動端的特點添加一些基礎樣式。
在這里會提到一個rem,想當初應該很多人也討論研究過px，pt，em等單位吧。rem是CSS3新 引進來的一個度量單位，舉個例子：“em”是相對于其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大 小，在我們多次使用時，就會帶來無法預知的錯誤風險。而rem是相對于根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考 值。
瀏覽器的基準字號設置為?62.5%，也就是?10px，現在?1rem = 10px?—— 為了計算方便。然后在body?上應用了?font-size: 1.6rem;，將頁面字號設置為?16px。
html {font-size: 62.5%;} body {font-size: 1.6rem; /* =16px */}可以用以下的代碼片段保證在低端瀏覽器下也不會出問題
移動端的html5+css3
css3代替DOM animation,使用setTimeout定時器, 定時修改DOM元素的style屬性。
css3使用設備GPU渲染，動用硬件設備本身的計算能力來做一些展示，效率上要比DOM animation要高很多。
至于HTML5，大家目前用的最多的也就僅僅是那幾個標簽而已，想詳細了解的自便吧。比如：
移動端的javascript
先說這一類的框架吧：
JQuery mobile，Sencha Touch等都是很龐大的UI框架。
Zepto.js：框架小，類jQuery，沒有多余的其他模塊，適合團隊自己擴展。（不支持WP）
沒有一個很好的團隊去折騰的話，還是建議使用jqm，因為你到后面還是會改成jqm搭配Hammer.js來搭建
說起移動端的javascript，使用手勢操作代替鼠標輸入/出事件。開發(fā)者大多數會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。那就先來看看PC端的一些事件：(mousedown, mouseup, click)
移動端的手勢事件：
touchstart //當手指接觸屏幕時觸發(fā)
touchmove //當已經接觸屏幕的手指開始移動后觸發(fā)
touchend //當手指離開屏幕時觸發(fā)
touchcancel //當在滑動手機的過程中突然出現一個系統(tǒng)事件，比如電話。這會就cancel掉。（基本很少用）
為何要用touch事件代替click事件？
- click事件300ms延時
- touch事件支持多點觸摸
- 手勢操作
移動端的css3的自定義字體（@font-face），前一篇文章有做介紹。這里就不詳細述說。
主菜
有人會問，圖片該怎么切，拿到的psd文件尺寸是多少，按照何種尺寸去制作？還是無從下手。那么，移動端頁面那么小，做頁面的時候按照何種安全可視尺寸來呢？
alert('width:' + window.innerWidth + ';height:' + window.innerHeight);
目前我知道的移動端可視區(qū)尺寸
- iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隱藏URL與狀態(tài)欄)
- iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隱藏URL與狀態(tài)欄)
- Note2 360 * 567 (未隱藏URL與狀態(tài)欄)
- iPad 3/4 768*928 (未隱藏URL與狀態(tài)欄)
- GALAXY SIII 360 * 567 (未隱藏URL與狀態(tài)欄)
- 小米2A 360 *567 (未隱藏URL與狀態(tài)欄)
- HTC G10 320 * 460
- 酷派大神 400615/400568(未隱藏URL與狀態(tài)欄)
設計稿按照640的尺寸去切（有的人按照480的去切，主要是考慮圖片資源的浪費），然后頁面可以當作是320的來寫，也就是說，字體大小以及圖片大小，在頁面制作的時候都需要除以2。
為什么要按照640的來切，卻用320的來制作呢？因為設備分辨率太多，圖片切大的去壓縮，在高分辨率的設備，圖片就不會變得很小了。
其實結果可知，手機端頁面，因為上面viewport設置了，一般瀏覽器都是320，360，400這類寬度制作頁面。
1、meta，link都有了
2、css reset也有了
3、盡可能的使用Flexbox 布局，盡量放棄float
4、圖片的切法和媒體查詢
5、移動端js的事件使用
6、最后手機測試完美收工
（簡單粗糙上檔次吧？）
甜品（飯后閑談消化）
這里我必須說的是局部刷新，定位問題吧。
position:sticky與position:fixed布局，因為存在太多兼容bug，于是都會利用iscroll來解決這個問題。
如何使用，請移步iscroll官網查閱，這里不作詳細說明。因為這里每一個點都可以來了說一篇或者好幾篇文章。
盒子邊框溢出
當我們指定了一個塊級元素時，并且為其定義了邊框，設置了其寬度為100％。按照盒子模型，就會發(fā)現該元素的左右邊框各1個像素會溢了，導致出現橫向滾動 條，這時候我們可以為其添加-webkit-box-sizing:border-box用來指定該盒子的大小包括邊框的寬度。
ios數字顏色樣式超過9位后失控
這個問題我不知道該怎么描述，就是在ios中，當數字超過9位數時，瀏覽器會給這個數字默認加上一個顏色，無論你設置什么顏色都無效。
css3關于background-size縮放背景圖像的使用;如何用flex和translate等分，居中。
轉載于:https://www.cnblogs.com/ling-du/p/5101821.html
總結
- 上一篇： 敏捷之旅--携程机票团队敏捷站会与公约
- 下一篇： OnClickListener冲突的问题