淺淡HTML5移動Web開發

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

1. 響應式web設計

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

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

(1).媒體查詢初探。媒體查詢并非新出現的技術,如下:

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

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

大家會發現我們又拓展了一個條件,對,就是當設備屏幕的寬度大于960px才會加載style.css樣式文件。我們究竟有哪些特性是可以被探測到的呢?下面列了一部分供大家參考(參考自//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-adjus在作怪。瀏覽器默認會根據當前屏幕和內容作調整,在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動畫時最好將動畫代碼提取出來單獨命名。

來源:博客園

上一篇: 詳細解剖大型H5單頁面應用的核心技術點

下一篇: 介紹六個牛逼的的HTML5電子書翻頁動畫

分享到: 更多
助赢北京pk拾计划软件 北京pk10技巧 通比牛牛几个赢家 胆拖投注计算器360 七乐彩开奖查询 河北时时在线投注 天津时时全国开奖公告 k10全天二期计划在线 时时彩最精准人工计划 北京赛车稳赚玩法技巧 必赢客手机版免费计划软件下载 3d万能胆组 黑马全人工计划软件 pk10买6码怎么倍投 手机炸金花怎么才能赢 捕鱼达人2有卡片的版本下载