說實話，咱們此次開發移動端的項目，整個項目組的人都是第一次，最初立項的時候爲是選擇native app和web app還爭論了一番，最後綜合考慮，咱們選擇了web（咱們選擇了h5）開發。但從這兩種開發模式的特色來講，從它們誕生之日起就開始了不斷的爭論，孰好 孰壞，本文不做探討，只是簡單羅列下本人開發遇到的問題和最終的解決方案。javascript
1. 響應式web設計css
說 到這個，移動開發面對的屏幕尺寸那叫一個豐富，其中安卓陣營就夠讓人頭痛的。咱們在PC端經常使用的兩種佈局方式就是固定佈局和彈性佈局，前者設置一個絕大多 數電腦能正常顯示的固定寬度居中顯示，後者則採用百分比。關於這二者討論的文章不少，有興趣的本身查閱下，我今天要介紹的就是相信你已經聽過的」響應式布 局」，響應式佈局意味着媒體查詢，這個在css2就已經出現的東西隨着html五、css3的到來又增添了新的生機。html
響應式web設計並不是新的技術，只不過將已有的開發技巧（彈性佈局、彈性圖片和媒體查詢等）整合在了一塊兒，並命了這個聽起來很牛X的名字——響應式web設計。猶如當年的Ajax同樣，將已有的技術從新組合發揮新的做用。前端
（1）.媒體查詢初探。媒體查詢並不是新出現的技術，以下：
其中就使用了媒體查詢，經過 標籤的media屬性爲樣式表指定了設備類型，固然CSS3時代的媒體查詢更加豐富。html5
發現了他們的區別嗎？對，不僅是針對設備進行適配，並且加了一個條件，就是當設備縱向放置的時候才匹配，我們再看一個。java
大 家會發現咱們又拓展了一個條件，對，就是當設備屏幕的寬度大於960px纔會加載style.css樣式文件。咱們究竟有哪些特性是能夠被探測到的呢？下 面列了一部分供你們參考（參考自http://www.w3.org/html/ig/zh/wiki/CSS3媒體查詢）：
- width 視口寬度
- height 視口高度
- device-width 設備屏幕的寬度
- device-height 設備屏幕的高度
- orientation 檢測屏幕處於橫屏仍是豎屏
- aspect-ratio 基於視口的寬高比例
- device-aspect-ratio 基於設備屏幕的寬高比
- color 顏色的位數，如min-color：32 匹配設備是否有32位或以上的顏色
- color-index 設備的顏色索引表中的顏色數
- monochrome 檢測單色振緩衝區中每像素使用的位數。爲非負數，如monochrome：3
- resolution 檢測屏幕或打印機的分辨率，如min-resolution：300dpi(dpi後面會介紹)，也能夠是每釐米像素點的度量值，如min-resolution：120dpcm
- scan 掃描方式，值爲progressive（逐行掃描）、interlace（隔行掃描）
- grid 檢測輸出設備是網格設備仍是位圖設備android
建立媒體查詢時，上述特性（scan和grid不行）均可以加上min和max前綴建立媒體查詢的範圍。除了link標籤可以進行媒體查詢，是否是還有其它的呢，答案是Yes 。html中的meta標籤，此前咱們經常使用的應該是這個
可是如今咱們要說的不是這個，而是這個：
在 多數ios和android設備的瀏覽器都支持viewport meta元素覆蓋默認的畫布縮放設置。在標籤中插入meta標籤，設置相應屬性便可，如上代碼，name=」viewport」 content中width=device-width表示瀏覽器頁面寬度等於設備寬度（同理能夠設置高度，也可指定具體值），initial- scale=1表示頁面不縮放保持，mininum-scale=1和maximum-scale=1表示容許用戶最小縮小至原大小和擴大到原大小（實際 就是不讓縮放^^），user-scaleable=no 表示禁止縮放, target- densitydpi = high-dpi表示適配高分辨率的屏幕，還能夠取值爲dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi，後面的四個定性，第一個定量，即dpi_value是DPI值，device-dpi是使用設備本來的 dpi 做爲目標 dp，不發生默認縮放，然後面的三個是指dpi取值在必定範圍的表示。這裏咱們先介紹前文出現過的一個名詞dpi，所表示的是每英寸所擁有的像素 （pixel）數目，數值越高，即表明顯示屏可以以越高的密度顯示圖像。當達到人眼的極限分辨率時，喬幫主給它取了一個很高端的名字——Retina。那 麼目前市面的手機分辨率是怎樣的一個分佈呢，ios你們都知道的，從iphone4時代開始就已是Retina屏了，至於Android能夠看下此前 Google官方公佈的數據：
從上面能夠看出，高分屏和超分屏已是主流了，具體的適配範圍仍是看各自的項目和定位吧。ios
講了這麼多，有人可能會疑惑爲何這些都不是用在CSS中的？別急，慢慢來，如今就介紹如何在樣式中運用，按照上述屏幕分辨率的四種劃分，咱們能夠看到基本能夠捨棄ldpi了。
/* 中分辨率屏幕 */
css3
/*高分辨率屏幕*/
web
/*超高分辨率屏幕（傳說中的Retina屏）*/
上面就是在css中的用法，把咱們須要的css代碼包含在大括號中就能用了，是否是很方便的樣子%>_<%。固然咱們還能夠用到以前提供的幾個特性，以下：
針對視口寬度不大於768像素的狀況加載大括號中的樣式。
雖然咱們能夠把設備的分辨率能夠分爲這幾類，可是屏幕的尺寸實在太多，若是針對每一種尺寸寫一種樣式，我以爲設計師和前端面不用幹別的了，由於開發成本實在太大，並且沒有必要，咱們只須要針對絕大多數的設備結合媒體查詢和彈性佈局來調整，減小開發成本。
2.CSS3新增屬性
如今移動端兩大陣營ios和android都是基於webkit內核的，而webkit內核對CSS3的支持走在了前面，在這裏咱們能夠拋開翔同樣的ie家族，盡情享受多彩絢麗CSS3世界吧！
CSS3 給咱們帶來了如：文字陰影（text-shadow）、盒子陰影（box-shadow）、圓角（border-radius）、背景漸變 （background: linear-gradient(#000, #fff)）、2D變換（transition）、動畫（animation）等你們耳熟能詳的經常使用屬性外，還有如-webkit-mask、 -webkit-text-stroke、-webkit-nbsp-mode、-webkit-tap-highlight-color、 -webkit-box-reflect、-webkit-marquee、-webkit-box等webkit內核私有屬性，至於這些屬性其餘瀏覽器 支持程度，有興趣的能夠本身研究研究，這上面的每個屬性都有本身的使用場景，就看如何靈活運用。今天我不所有列出，僅簡單介紹幾個。
（1）、 介紹的第一個就是display：-webkit-box，咱們知道元素大體分爲內聯元素、塊狀元素和介於二者之間的元素，固然還有inline- table、table-cell等神馬的，那麼display: -webkit-box怎麼用呢，什麼舉個應用場景，對於下圖所示的狀況，父元素被一、二、3均分，且2和1之間間隔10px，你會怎麼作？
這時候咱們能夠試試新的display:-webkit-box，另外還有以下屬性配合使用，
-webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit，其中默認值是inline-axis，即橫向排列
-webkit-box-flex 子元素之間比例，僅做一個係數
-webkit-box-direction 子元素排列順序 normal | reverse | inherit，其中默認值是normal
-webkit-box-flex-group 以組爲單位的流體系數
-webkit-box-ordinal-group 以組爲單位的子元素排列方向
-webkit-box-lines 子元素是否換行，相似word-wrap和word-break的做用
-webkit-box-align 子元素垂直方向的對其方式
-webkit-box-pack 子元素水平方向的對其方式
這些配合使用的屬性咱們所有默認便可
CSS：
HTML：
怎麼理解上面的代碼呢，父親有一塊地，要分給兄弟幾個，除去老大和老二之間的分割線所佔的那塊，剩下的部分均分的分數由li的兄弟個數和box-flex的總數肯定，如今一共三兄弟，每兄弟的box-flex都是1，因此就總分數=1*1+1*1+1*1=3。
若是代碼稍做修改
那麼如今老二的box-flex是2了，總分數就是1*1+1*2+1*1=4，其中老大老三各佔一份，老二佔兩份，顯示效果以下：
（2）、 -webkit-text-size-adjust:none;我作項目的時候發現一個問題，就是當豎屏的屏的時候顯示效果不錯，可是當橫屏的時候，字體 會變大，不管你怎麼設置字體大小都無效，後來才知道是text-size-adjust（https://developer.mozilla.org /en-US/docs/CSS/text-size-adjust）在做怪。瀏覽器默認會根據當前屏幕和內容做調整，在webkit內核的瀏覽器中只需 要-webkit-text-size-adjust:none就禁止自動調整，至因而否全局活局部使用看本身的項目需求。
如上圖所示，很明顯當手機由豎屏轉向橫屏的時候主題區域的文字自動變大，跟你本身設置的大小無關，當你設置了-webkit-text-size-adjust:none後橫屏的效果是這樣的
這樣，字體的大小就有咱們本身設置，是可控的。
（3）、字級單位。
咱們經常使用的有px、pt、百分比、em等，很慚愧，我最近才知道有rem，並且是個至關不錯的朋友。前面的幾個單位你們都比較熟悉，不知道有沒有和我同樣小白的才知道rem的呢，咱們就介紹一下這個新朋友，它是隨着css3來到這個世界。
我 們以前用em、百分比的時候遇到的問題就是計算，並且當嵌套的層級太多時就會很是難以把控，而用px則被固定死了，如今咱們用rem徹底不用擔憂這個問 題，由於rem的參照對象只有根節點。咱們只需設置根節點的大小，全部子節點都只需參照它來設計就能夠，下面是px、em、百分比和pt的對比
根 據上面的圖表（紅色部分爲默認，固然不一樣的瀏覽器渲染默認值不同，具體還需各位實測）能夠看出，咱們只需設置html根元素字體大小爲75%，對應的 px值就是12，這樣咱們能夠很方便的設置頁面的寬高和字體大小，固然單位是rem，這樣參考對象纔會永遠是html而不是父元素，當須要變化的時候，只 需改變html的大小其餘的元素都會相應變化，方便極了。
三、HTML5新增標籤。
在html5中新增量不少標籤，增強連html標籤的語義化，如
等等，這些標籤都各自有本身大意義，再也不僅僅是span和div，雖然html4中也有不少語義化的標籤，可是不如html5豐富。除了這些新增的標籤，還有一些此前就有的標籤，可是類別新增，最具表明性的就是表單form，而本文要介紹的就是form。
以上除了type=text外，其餘的都是新增的，若是瀏覽器支持這些屬性的話，就會自動調用相應組件，如在移動設備中type=number/email/text時，瀏覽器會調用不一樣版面的鍵盤，這樣加快用戶的輸入，體驗也更美好，以下
若是是type=range則會出現這樣的組件，供選擇範圍
若是是type=color則會出現顏色選擇器
若是是type=date則出現日期選擇器
若是是type=search,則在輸入時候出現一個一鍵清除的按鈕，點擊輸入的文字所有清除
另 外，除了input的type新增量類別，還增長一些很實用的屬性，如placeholder，咱們知道，input中咱們經常會默認一些文案，當用戶輸 入的時候會自動清除，html5以前咱們是靠javascript實現的，可是有了html5，咱們能夠輕鬆實現，只須要placeholder=」默認 文案」 以下
固然新增的不僅有placeholder，還有譬如能夠關閉默認大小寫的autocapitalize=」off」，有興趣的童鞋能夠研究研究。
四、選擇符
選擇符大體分爲元素選擇符、關係選擇符、屬性選擇符、僞類選擇符、僞對象選擇符，在PC端，咱們用的最多的就是元素選擇符、關係選擇符和屬性選擇符如
div{……}、div.class{……}、div#id{……}、div span{……}、div[class="classname"]{}
可是因爲ie某些瀏覽器的緣由，不少好用的選擇符不能普遍使用，如ie6只支持a標籤的僞類選擇符，可是在移動端，咱們就不用在乎這些了，絕大多數選擇符都已經可使用了，如前文已經用到的
.item_list li:first-child{background: #f00}
.item_list li:nth-child(2){margin-left: 10px;background: #ff0;-webkit-box-flex:1;}
.item_list li:last-child{background: #c96}
僞 類選擇符和僞對象選擇符有不少，靈活運用能夠減小不少沒必要要的代碼。如E:nth-child(n){ …… }、E:nth-of-type(n){ …… }、E:disabled{ …… }、E:empty{ …… }、E:first-letter/E::first-letter{ …… }、E:first-line/E::first-line{ …… }、E:before/E::before{ ……}、E:after/E::after{…… }、E::selection{ …… }等，這裏不細說。
五、一些小的建議
（1）、如何禁止用戶旋轉設備
這裏實際上是想告訴你在瀏覽器裏辦不到，由於禁止開發者阻止瀏覽器的orientationchange事件。
（2）、禁用自動識別電話號碼
在開發項目的時候，咱們常常會用到一些數字或者就是電話號碼，可是又不想系統自動識別讓用戶能夠直接撥打，咱們只須要在標籤之間加入便可，可是有些特殊狀況咱們須要能夠用戶直接撥打，如
不要緊，像這樣010-52918772便可，系統會自動識別，用戶點擊便可選擇撥號。
（3）盒子邊框溢出
當 咱們指定了一個塊級元素時，而且爲其定義了邊框，設置了其寬度爲100％。按照盒子模型，就會發現該元素的左右邊框各1個像素會溢了，致使出現橫向滾動 條，這時候咱們能夠爲其添加-webkit-box-sizing:border-box用來指定該盒子的大小包括邊框的寬度。
（4）、ios數字顏色樣式超過9位後失控
這個問題我不知道該怎麼描述，就是在ios中，當數字超過9位數時，瀏覽器會給這個數字默認加上一個顏色，不管你設置什麼顏色都無效。
（5）、iOS可禁止用戶在新窗口打開頁面
在 項目開發中，有時咱們須要某個連接在當前頁面打開，這樣須要禁止用戶在新窗口打開頁面，咱們可使用a標籤的target=」_self」指定在當前頁面 打開，可是在iOS中長按連接一段時間後，系統會彈出一個對話框，用戶能夠經過點擊」在新頁面中打開」來在新窗口打開頁面，這樣咱們指定的target屬 性就失效了，可是能夠經過指定當前元素的-webkit-touch-callout屬性爲none來禁止iOS彈出這些按鈕。
（6）、CSS3繪圖和CSS3動畫在html5和css3的世界裏，不少圖片都是多餘的，咱們能夠盡情發揮本身的想象，讓CSS3替代沒必要要的圖片沒必要要的JavaScript，另外作CSS3動畫時最好將動畫代碼提取出來單獨命名。