手機移動前端開發(fā)需要注意的20個要點

《手機移動前端開發(fā)需要注意的20個要點》由會員上傳分享，免費在線閱讀，更多相關內容在教育資源-天天文庫。

1、手機/移動前端開發(fā)需要注意的20個要點·1、首先我們來看看webkit內核中的一些私有的meta標簽，這些meta標簽在開發(fā)webapp時起到非常重要的作用····

2、pple-mobile-web-app-status-bar-style">·代碼laycode-v1.1第一個meta標簽表示：強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；第二個meta標簽是iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；第三個meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態(tài)條的樣式

3、；第四個meta標簽表示：告訴設備忽略將頁面中的數(shù)字識別為電話號碼?2、HTML5標簽的使用在開始編寫webapp時，哥建議前端工程師使用HTML5，而放棄HTML4，因為HTML5可以實現(xiàn)一些HTML4中無法實現(xiàn)的豐富的WEB應用程序的體驗，可以減少開發(fā)者很多的工作量，當然了你決定使用HTML5前，一定要對此非常熟悉，要知道HTML5的新標簽的作用。比如定義一塊內容或文章區(qū)域可使用section標簽，定義導航條或選項卡可以直接使用nav標簽等等。?3、放棄CSS?float屬性在項目開發(fā)過程中可以會遇到內容排列顯示的布局

4、，假如你遇見這樣的視覺稿，哥建議你放棄float，可以直接使用display:inline-block;?4、利用CSS3邊框背景屬性這個按鈕有圓角效果，有內發(fā)光效果還有高光效果，這樣的按鈕使用CSS3寫是無法寫出來的，當然圓角可以使用CSS3來寫，但高光和內發(fā)光卻無法使用CSS3編寫，這個時候你不妨使用-webkit-border-image來定義這個按鈕的樣式。-webkit-border-image就個很復雜的樣式屬性。?5、塊級化a標簽請保證將每條數(shù)據(jù)都放在一個a標簽中，為何這樣做？因為在觸控手機上，為提升用戶體驗

5、，盡可能的保證用戶的可點擊區(qū)域較大。?6、自適應布局模式在編寫CSS時，我不建議前端工程師把容器（不管是外層容器還是內層）的寬度定死。為達到適配各種手持設備，我建議前端工程師使用自適應布局模式（支付寶采用了自適應布局模式），因為這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web?safarik、chrome都能夠正常的顯示，你無需再次考慮設備的分辨率。?7、學會使用webkit-box上一節(jié)，我們說過自適應布局模式，有些同學可能會問：如何在移動設備上做到完全自適應呢？很感謝webk

6、it為display屬性提供了一個webkit-box的值，它可以幫助前端工程師做到盒子模型靈活控制。?8、如何去除Android平臺中對郵箱地址的識別看過iOS?webapp?API的同學都知道iOS提供了一個meta標簽:用于禁用iOS對頁面中電話號碼的自動識別。在iOS中是不自動識別郵件地址的，但在Android平臺，它會自動檢測郵件地址，當用戶touch到這個郵件地址時，Android會彈出一個框提示用戶發(fā)送郵件，如果你不想Android自動識別頁面中的郵件地址，你不妨加上這樣一句meta標簽在head中

7、?content="email=no"?name="format-detection"?/>?9、如何去除iOS和Android中的輸入URL的控件條你的老板或者PD或者交互設計師可能會要求你：能否讓我們的webapp更加像nativeapp，我不想讓用戶看見那個輸入url的控件條？答案是可以做到的。我們可以利用一句簡單的javascript代碼來實現(xiàn)這個效果setTimeout(scrollTo,0,0,0);請注意，這句代碼必須放在window.onload里才能夠正常的工作，而且你的當前文檔的內容高度必須是高于窗口的

8、高度時，這句代碼才能有效的執(zhí)行。?10、如何禁止用戶旋轉設備我曾經(jīng)也想禁止用戶旋轉設備，也想實現(xiàn)像某些客戶端那樣：只能在肖像模式或景觀模式下才能正常運行。但現(xiàn)在我可以很負責任的告訴你：別想了!在移動版的webkit中做不到！至少Apple?webapp?API已經(jīng)說到了：我們?yōu)榱俗層脩粼趕afari中正