移動開發那些事

說實話，我們這次開發移動端的專案，整個專案組的人都是第一次，最初立項的時候為是選擇native app和web app還爭論了一番，最後綜合考慮，我們選擇了web（我們選擇了h5）開發。 但從這兩種開發模式的特點來說，從它們誕生之日起就開始了不斷的爭論，孰好孰壞，本文不作探討，只是簡單羅列下本人開發遇到的問題和最終的解決方案。

1. 回應式web設計

說到這個，移動開發面對的螢幕尺寸那叫一個豐富，其中安卓陣營就夠讓人頭痛的。 我們在PC端常用的兩種佈局方式就是固定佈局和彈性佈局，前者設置一個絕大多數電腦能正常顯示的固定寬度居中顯示，後者則採用百分比。 關於這兩者討論的文章很多，有興趣的自己查閱下，我今天要介紹的就是相信你已經聽過的「回應式佈局」，回應式佈局意味著媒體查詢，這個在css2就已經出現的東西隨著html5、css3的到來又增添了新的生機。

回應式web設計並非新的技術，只不過將已有的開發技巧（彈性佈局、彈性圖片和媒體查詢等）整合在了一起，並命了這個聽起來很牛X的名字——回應式web設計。 猶如當年的Ajax一樣，將已有的技術重新組合發揮新的作用。

（1）.媒體查詢初探。 媒體查詢並非新出現的技術，如下：

其中就使用了媒體查詢，通過 標籤的media屬性為樣式表指定了裝置類型，當然CSS3時代的媒體查詢更加豐富。

發現了他們的區別嗎？ 對，不只是針對設備進行適配，而且加了一個條件，就是當設備縱向放置的時候才匹配，咱們再看一個。

大家會發現我們又拓展了一個條件，對，就是當設備螢幕的寬度大於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 檢測輸出裝置是網格設備還是點陣圖設備

創建媒體查詢時，上述特性（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官方公佈的資料：

從上面可以看出，高分屏和超分屏已經是主流了，具體的適配範圍還是看各自的專案和定位吧。

講了這麼多，有人可能會疑惑為什麼這些都不是用在CSS中的？ 別急，慢慢來，現在就介紹如何在樣式中運用，按照上述螢幕解析度的四種劃分，我們可以看到基本可以捨棄lDPI了。
/* 中解析度螢幕 */

/*高解析度螢幕*/

/*超高解析度螢幕（傳說中的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怎麼用呢，什麼舉個應用場景，對於下圖所示的情況，父元素被1、2、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的大小其他的元素都會相應變化，方便極了。

3、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」，有興趣的童鞋可以研究研究。

4、選擇符

選擇符大致分為元素選擇符、關係選擇符、屬性選擇符、偽類選擇符、偽物件選擇符，在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{ ...... } 等，這裡不細說。

5、一些小的建議

（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動畫時最好將動畫代碼提取出來單獨命名。

本文前前後後囉囉嗦嗦說了很多，大多都是一筆帶過沒有細說，因為每一個小點的研究都可以寫一篇博文了，我這就不班門弄斧，有興趣的童鞋就細細研究一番。 由於文筆不好加上知識範圍有限，如有錯誤敬請指正，謝謝！

（微博UDC原創博文，轉載請注明出處