一、首先咱們來看看webkit內核中的一些私有的meta標籤,這些meta標籤在開發webapp時起到很是重要的做用javascript
1 |
<meta content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name= "viewport" /> |
2 |
<meta content= "yes" name= "apple-mobile-web-app-capable" /> |
3 |
<meta content= "black" name= "apple-mobile-web-app-status-bar-style" /> |
4 |
<meta content= "telephone=no" name= "format-detection" /> |
第一個meta標籤表示:強制讓文檔的寬度與設備的寬度保持1:1,而且文檔最大的寬度比例是1.0,且不容許用戶點擊屏幕放大瀏覽;
第二個meta標籤是iphone設備中的safari私有meta標籤,它表示:容許全屏模式瀏覽;
第三個meta標籤也是iphone的私有標籤,它指定的iphone中safari頂端的狀態條的樣式;
第四個meta標籤表示:告訴設備忽略將頁面中的數字識別爲電話號碼css
二、HTML5標籤的使用
在開始編寫webapp時,哥建議前端工程師使用HTML5,而放棄HTML4,由於HTML5能夠實現一些HTML4中沒法實現的豐富的WEB應用程序的體驗,能夠減小開發者不少的工做量,固然了你決定使用HTML5前,必定要對此很是熟悉,要知道HTML5的新標籤的做用。好比定義一塊內容或文章區域可以使用section標籤,定義導航條或選項卡能夠直接使用nav標籤等等。
三、放棄CSS float屬性
在項目開發過程當中能夠會遇到內容排列排列顯示的佈局(見下圖),假如你碰見這樣的視覺稿,哥建議你放棄float,能夠直接使用display:block;
四、利用CSS3邊框背景屬性
這個按鈕有圓角效果,有內發光效果還有高光效果,這樣的按鈕使用CSS3寫是沒法寫出來的,固然圓角可使用CSS3來寫,但高光和內發光卻沒法使用CSS3編寫,
這個時候你不妨使用-webkit-border-image來定義這個按鈕的樣式。
-webkit-border-image就個很複雜的樣式屬性。
html
五、塊級化a標籤
請保證將每條數據都放在一個a標籤中,爲什麼這樣作?由於在觸控手機上,爲提高用戶體驗,儘量的保證用戶的可點擊區域較大。
六、自適應佈局模式
在編寫CSS時,我不建議前端工程師把容器(不論是外層容器仍是內層)的寬度定死。爲達到適配各類手持設備,我建議前端工程師使用自適應佈局模式(支付寶採用了自適應佈局模式),由於這樣作可讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都可以正常的顯示,你無需再次考慮設備的分辨率。前端
七、學會使用webkit-box
上一節,咱們說過自適應佈局模式,有些同窗可能會問:如何在移動設備上作到徹底自適應呢?很感謝webkit爲display屬性提供了一個webkit-box的值,它能夠幫助前端工程師作到盒子模型靈活控制。
八、如何去除Android平臺中對郵箱地址的識別
看過iOS webapp API的同窗都知道iOS提供了一個meta標籤:用於禁用iOS對頁面中電話號碼的自動識別。在iOS中是不自動識別郵件地址的,但在Android平臺,它會自動檢測郵件地址,當用戶touch到這個郵件地址時,Android會彈出一個框提示用戶發送郵件,若是你不想Android自動識別頁面中的郵件地址,你不妨加上這樣一句meta標籤在head中html5
1 |
<meta content= "email=no" name= "format-detection" /> |
九、如何去除iOS和Android中的輸入URL的控件條
你的老闆或者PD或者交互設計師可能會要求你:可否讓咱們的webapp更加像nativeapp,我不想讓用戶看見那個輸入url的控件條?
答案是能夠作到的。咱們能夠利用一句簡單的javascript代碼來實現這個效果java
1 |
setTimeout(scrollTo,0,0,0); |
請注意,這句代碼必須放在window.onload裏纔可以正常的工做,並且你的當前文檔的內容高度必須是高於窗口的高度時,這句代碼纔能有效的執行。android
十二、如何關閉iOS中鍵盤自動大寫
咱們知道在iOS中,當虛擬鍵盤彈出時,默認狀況下鍵盤是開啓首字母大寫的功能的,根據某些業務場景,可能咱們須要關閉這個功能,移動版本webkit爲input元素提供了autocapitalize屬性,經過指定autocapitalize=」off」來關閉鍵盤默認首字母大寫。ios
1五、iOS中如何禁止用戶選中文字
咱們經過指定文字標籤的-webkit-user-select屬性爲none即可以禁止iOS用戶選中文字。css3
1六、iOS中如何獲取滾動條的值
桌面瀏覽器中想要獲取滾動條的值是經過document.scrollTop和document.scrollLeft獲得的,但在iOS中你會發現這兩個屬性是未定義的,爲何呢?由於在iOS中沒有滾動條的概念,在Android中經過這兩個屬性能夠正常獲取到滾動條的值,那麼在iOS中咱們該如何獲取滾動條的值呢?
經過window.scrollY和window.scrollX咱們能夠獲得當前窗口的y軸和x軸滾動條的值。
web
1七、如何解決盒子邊框溢出
當你指定了一個塊級元素時,而且爲其定義了邊框,設置了其寬度爲100%。在移動設備開發過程當中咱們一般會對文本框定義爲寬度100%,將其定義爲塊級元素以實現全屏自適應的樣式,但此時你會發現,該元素的邊框(左右)各1個像素會溢了文檔,致使出現橫向滾動條,爲解決這一問題,咱們能夠爲其添加一個特殊的樣式-webkit-box-sizing:border-box;用來指定該盒子的大小包括邊框的寬度。
1九、如何解決android平臺中頁面沒法自適應
雖然你的html和css都是徹底自適應的,但有一天若是你發現你的頁面在android中顯示的並非自適應的時候,首先請你確認你的head標籤中是否包含如下meta標籤:
1 |
<meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" /> |
若是有的話,那請你再仔細的看清楚有沒有這個屬性的值width=device-width,若是沒有請當即加上吧!
20、如何解決iOS 4.3版本中safari對頁面中5位數字的自動識別和自動添加樣式
新的iOS系統也就是4.3版本,升級後對safari形成了一個bug:即便你添加了以下的meta標籤,safari仍然會對頁面中的5位連續的數字進行自動識別,而且將其從新渲染樣式,也就是說你的css對該標籤是無效的。
1 |
<meta name= "format-detection" content= "telphone=no" /> |
咱們能夠用一個比較齷齪的辦法來解決。好比說支付寶wap站點中顯示金額的標籤,咱們都作了以下改寫:
1 |
<button class = "t-balance" style= "background:none;padding:0;border:0;" >95009.00</button>元 |
轉自整理:移動平臺3G手機網站前端開發佈局技巧彙總 - 前端開發-武方博