從HTML5霸氣上線以來，便迅速占領(lǐng)了數(shù)百萬開發(fā)者的使用高地，知名企業(yè)猶如Google、Facebook以及亞馬遜等紛紛從 Adobe Flash 轉(zhuǎn)移到了 HTML5。于是在移動時(shí)代來臨之際，HTML5也順勢成為開發(fā)者們的重點(diǎn)遷徙對象，成功引領(lǐng)潮流。然而在開發(fā)的過程中，并不是每個(gè)開發(fā)者都能將細(xì)微之處做到極致，那如何才能讓你的H5在汪洋大海中獨(dú)樹一幟呢？本文將分享幾個(gè)妙招，讓你的開發(fā)更完美。

單頁內(nèi)容控制

移動端H5活動頁面經(jīng)常需要分享到社交App（如微信、QQ等）中，而用移動設(shè)備查看頁面時(shí)會發(fā)現(xiàn)，微信瀏覽器中有頂部導(dǎo)航欄，但QQ內(nèi)置瀏覽器里不止有頂部導(dǎo)航，底部也有操作欄（safari瀏覽器也一樣），這些都會占用設(shè)計(jì)稿顯示區(qū)域。

為了避免打開的web與瀏覽器導(dǎo)航欄發(fā)生沖突，一般會使用多媒體自適應(yīng)的形式，根據(jù)屏幕像素的不同，向上的間距也要相應(yīng)進(jìn)行變化，而我們設(shè)計(jì)常用尺寸是750 x 1334 / 640 x 1136，因此在設(shè)計(jì)環(huán)節(jié)就需要考慮單頁內(nèi)容，頁面底部要預(yù)留一定的空白，這樣在微信或QQ中才不會被遮住。

如下圖（QQ內(nèi)置瀏覽器）：頁面設(shè)計(jì)尺寸為 750 x 1334，頂部占用 150px，底部占用 110px，共占用了 260px，因此設(shè)計(jì)稿內(nèi)容應(yīng)控制在 1334-260=1074px 的高度內(nèi)。編寫代碼時(shí)，使用 Chrome 瀏覽器模擬設(shè)備大小，將該尺寸（750*1074）存下來，用于實(shí)時(shí)查看移動端頁面效果。

H5頁面窗口調(diào)整

根據(jù)HTML5 “一次開發(fā)，多處兼容”的特性，能夠橫跨多種平臺和設(shè)備，而利用 meta 標(biāo)簽對頁面進(jìn)行縮放，使得我們可以直接根據(jù)設(shè)計(jì)稿來進(jìn)行頁面的編寫，不用再進(jìn)行單位的換算等等，在此注意調(diào)整頁面窗口，禁止用戶縮放就能省去很多不必要的麻煩。

識別錯(cuò)誤源頭并更改

在做移動端的web開發(fā)的時(shí)候； iOS 上的Safari總會把長串?dāng)?shù)字識別為電話號碼，文字變成藍(lán)色，點(diǎn)擊還會彈出菜單提示用戶是否撥打電話。別的地方倒也罷了，如果在用戶名中出現(xiàn)數(shù)字（例如手機(jī)注冊新浪微博的話用戶名就是“手機(jī)用戶xxxxxxxx”），這種版式會讓你的app瞬間掉價(jià)，按照下列方式便可避免。

禁用后，如果想要頁面識別電話功能，做法如下。

同理，Android平臺中也會無故出現(xiàn)對郵箱地址的識別，將telephone 換成email就OK了。

圓圖邊框設(shè)置

在安卓的開發(fā)平臺上，當(dāng)圓形圖片使用 border 時(shí)，邊框就任性的變形了（如上圖所示）

這時(shí)只需要給 img 外嵌套一個(gè)元素，為其使用圓角，問題就解決了。

實(shí)現(xiàn)打電話&發(fā)短信

1.打電話

2.發(fā)短信

測試二維碼圖片

有時(shí)候掃描二維碼之后，會跳轉(zhuǎn)至某個(gè)地址，不幸的話微信或者QQ會對這個(gè)地址進(jìn)行溫馨提醒，如下圖所示：

這樣會阻止部分用戶繼續(xù)訪問，從而無法很好的將用戶引導(dǎo)到活動想要推廣的產(chǎn)品/品牌頁面，如 App 的下載頁面等。因此二維碼的掃描測試不能少。

舉個(gè)例子，如果二維碼掃描結(jié)果是應(yīng)用的下載地址的話，可以使用應(yīng)用寶的微下載地址來生成二維碼，這是不會被“溫馨提醒”的。

微信二維碼

一般會碰到下面兩個(gè)問題

1）同一個(gè)頁面里要是有兩個(gè)二維碼，長按掃描總是只能掃出 左側(cè)/第一個(gè) 二維碼。

解決：可視區(qū)域內(nèi)只能出現(xiàn)一個(gè)二維碼。

2）使用 meta 標(biāo)簽縮放頁面后長按二維碼圖片無反應(yīng)。

解決：使用了以下代碼之后，就能長按識別二維碼了~

Retina 顯示屏

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè)，如在同樣物理尺寸的屏幕上，蘋果設(shè)備的2倍retina顯示屏中，像素點(diǎn)1個(gè)變?yōu)?個(gè),在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設(shè)計(jì)為傳統(tǒng)PC的2倍，在此給出的前端的應(yīng)對方案是：

設(shè)計(jì)稿切出來的圖片長寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來的1/2

// 例如圖片寬高為：200px*200px，那么寫法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px.css{font-size:20px;}

禁止IOS和Android用戶選中文字

禁止IOS和Android用戶選中文字，只需按照下列方法即可。

改變placeholder顏色值

如何改變webkit表單輸入框placeholder的顏色值呢？來試試下面的方法。

此外，HTML5開放的標(biāo)準(zhǔn)支持，還有助于為碎片化的移動設(shè)備、不同的屏幕尺寸、差異化的平臺和操作系統(tǒng)開發(fā)應(yīng)用。注意到了上面這些問題，應(yīng)該能讓你的水平提高一個(gè)level,但是，小編無法測試所有的手機(jī)型號，無法盡善盡美。

本文轉(zhuǎn)載自寶原科技。

來越多的開發(fā)者熱衷于使用html5+JavaScript開發(fā)移動Web App。不過，HTML5 Web APP的出現(xiàn)能否在未來取代移動應(yīng)用，就目前來說，還是個(gè)未知數(shù)。那么，有什么辦法，既可以使用HTMl5開發(fā)應(yīng) 用，又可以將其簡單封裝成APK文件呢？

一、Android SDK中的WebView

1.在要Activity中實(shí)例化WebView組件：WebView webView=new WebView(this);

2.調(diào)用WebView的loadUrl()方法，設(shè)置WevView要顯示的網(wǎng)頁：

? 互聯(lián)網(wǎng)用：webView.loadUrl("http://www.qietu.com");

? 本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中

3.調(diào)用Activity的setContentView( )方法來顯示網(wǎng)頁視圖

4.用WebView點(diǎn)鏈接看了很多頁以后為了讓W(xué)ebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點(diǎn)擊系統(tǒng)回退剪鍵，整個(gè)瀏覽器會調(diào)用finish()而結(jié)束自身，而不是回退到上一頁面

5.需要在AndroidManifest.xml文件中添加權(quán)限，否則會出現(xiàn)Web page not available錯(cuò)誤。

? <uses-permission android:name="android.permission.INTERNET" />

缺點(diǎn)：如果是載入的是普通網(wǎng)頁，沒有什么問題，但如果是html5,封裝后，在android2.3以上才能正常訪問，android2.2及以下，SDK中的WebView還沒完全支持HTML5

下面是具體例子：

MainActivity.java

??? package com.android.webview.activity; ?

??? import android.app.Activity; ?

??? import android.os.Bundle; ?

??? import android.view.KeyEvent; ?

??? import android.webkit.WebView; ?

??? public class MainActivity extends Activity { ?

??????? private WebView webview; ?

??????? @Override

??????? public void onCreate(Bundle savedInstanceState) { ?

??????????? super.onCreate(savedInstanceState); ?

??????????? //實(shí)例化WebView對象 ?

??????????? webview=new WebView(this); ?

??????????? //設(shè)置WebView屬性，能夠執(zhí)行Javascript腳本 ?

??????????? webview.getSettings().setJavaScriptEnabled(true); ?

??????????? //加載需要顯示的網(wǎng)頁 ?

??????????? webview.loadUrl("http://www.qietu.com/"); ?

??????????? //設(shè)置Web視圖 ?

??????????? setContentView(webview); ?

??????? } ?

??????? @Override

??????? //設(shè)置回退 ?

??????? //覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法 ?

??????? public boolean onKeyDown(int keyCode, KeyEvent event) { ?

??????????? if ((keyCode==KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { ?

??????????????? webview.goBack(); //goBack()表示返回WebView的上一頁面 ?

??????????????? return true; ?

??????????? } ?

??????????? return false; ?

??? }

在AndroidManifest.xml文件中添加權(quán)限

??? <?xml version="1.0" encoding="utf-8"?>

??? <manifest xmlns:android="http://schemas.android.com/apk/res/android"

????????? package="com.android.webview.activity"

????????? android:versionCode="1"

????????? android:versionName="1.0">

??????? <uses-sdk android:minSdkVersion="10" />

??????? <application android:icon="@drawable/icon" android:label="@string/app_name">

??????????? <activity android:name=".MainActivity"

????????????????????? android:label="@string/app_name">

??????????????? <intent-filter>

??????????????????? <action android:name="android.intent.action.MAIN" />

??????????????????? <category android:name="android.intent.category.LAUNCHER" />

??????????????? </intent-filter>

??????????? </activity>

??????? </application>

??????? <uses-permission android:name="android.permission.INTERNET"/>

??? </manifest>

二、使用PhoneGap

??? PhoneGap是一個(gè)用基于HTML，CSS和JavaScript的，創(chuàng)建移動跨平臺移動應(yīng)用程序的快速開發(fā)平臺。它使開發(fā)者能夠利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機(jī)的核心功能——包括地理定位，加速器，聯(lián)系 人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以以此擴(kuò)展無限的功能。PhoneGap是免費(fèi)的，但是它需要特定平臺提供的附加軟件，例如 iPhone的iPhone SDK，Android的Android SDK等，

詳細(xì)方法請見：http://phonegap.com/start#android

優(yōu)點(diǎn)：在Eclipse中加入SDK，編程自由，完美適應(yīng)不同設(shè)備屏幕大小，適合高手使用。

缺點(diǎn)：沒有使用布局，直接加載網(wǎng)頁，不能添加廣告。

----------------

切圖網(wǎng)（qietu.com）最早將psd轉(zhuǎn)html服務(wù)模式帶到國內(nèi)，并首個(gè)提供響應(yīng)式、webapp前端開發(fā)的公司。專注web前端開發(fā)技術(shù)，關(guān)注用戶體驗(yàn)，加我們公眾微信賬號：qietuwang（長按復(fù)制）

子創(chuàng)意，關(guān)注前沿科技和創(chuàng)業(yè)資訊，提供專業(yè)的互聯(lián)網(wǎng)開發(fā)，產(chǎn)品設(shè)計(jì)，媒體運(yùn)營支撐服務(wù)和咨詢。如有需求歡迎朋友們合作和咨詢。

更多資訊，點(diǎn)擊上方【訂閱】，訂閱橘子創(chuàng)意。

一、 摘要

今天給大家介紹有關(guān)HTML5移動開發(fā)APP開發(fā)框架,這里主要給大家介紹10款移動APP開發(fā)框架,下一篇文章將給大家具體演示一下如何用這些框架來搭建一個(gè)移動APP應(yīng)用.

十款移動APP開發(fā)框架:

1.jquery mobile框架

2.bootstrap框架

3.ionic框架

4.Mobile Angular UI框架

5.Intel XDK框架

6.Appcelerator Titanium框架

7.Sencha Touch框架

8.Kendo UI框架

9.PhoneGap框架

10.mui框架

1.jquery mobile框架

jQuery Mobile是jQuery 在手機(jī)上和平板設(shè)備上的版本。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫，而且會發(fā)布一個(gè)完整統(tǒng)一的jQuery移動UI框架。支持全球主流的移動平臺。

2.bootstrap框架

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。

它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動態(tài)CSS語言Less寫成。

Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項(xiàng)目。

國內(nèi)一些移動開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來。

3.ionic框架

Ionic 是一個(gè)強(qiáng)大的 HTML5 應(yīng)用程序開發(fā)框架，可以幫助您使用 Web 技術(shù)，比如 HTML、CSS 和 Javascript 構(gòu)建接近原生體驗(yàn)的移動應(yīng)用程序。

Ionic 主要關(guān)注外觀和體驗(yàn)，以及和你的應(yīng)用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動應(yīng)用程序開發(fā)。

4.Mobile Angular UI框架

Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的響應(yīng)式移動開發(fā)HTML5框架。

Mobile Angular UI的關(guān)鍵字有：

1.Bootstrap 3

2.AngularJS

Bootstrap 3 Mobile組件，比如switches, overlays和sidebars，這些都是bootstrap中沒有的。

AngularJS modules， 比如 angular-route, angular-touch 和 angular-animate

響應(yīng)式媒體查詢是將bootstrap作為單獨(dú)的文件，你只需要包含你所需要的東西。

Mobile Angular UIu并不包含任何jQuery依賴，你需要做的只是通過一些AngularJS指令創(chuàng)建友好的用戶體驗(yàn)。

5.Intel XDK框架

Intel發(fā)布了其首個(gè)版本基于web的編程工具，可幫助開發(fā)者為Android和iOS開發(fā)移動應(yīng)用。

這款免費(fèi)的軟件名為Intel XDK，實(shí)際上這是今年2月份Intel收購的AppMobi軟件的重新包裝后的版本，所以并非新鮮事物。開發(fā)者可用此軟件開發(fā)基于HTML5的應(yīng)用，并 用于移動設(shè)備中。

6.Appcelerator Titanium框架

Titanium 是一個(gè)跟手機(jī)平臺無關(guān)的開發(fā)框架，用來開發(fā)具有本地應(yīng)用效果的Web應(yīng)用。當(dāng)前主要支持 iPhone 和 Android 手機(jī)。

主要提供的API包括：

2D/3D animations

Geo-location, compass, and maps

Augmented reality features

Social app authentication and native client support for email

SOAP or REST API calls

Audio, video, and image capture and playback

Taps into local filesystem and SQL lite databases

Accesses photo gallery or address data

橘子創(chuàng)意，關(guān)注前沿科技和創(chuàng)業(yè)資訊，提供專業(yè)的互聯(lián)網(wǎng)開發(fā)，產(chǎn)品設(shè)計(jì)，媒體運(yùn)營支撐服務(wù)和咨詢。如有需求歡迎朋友們合作和咨詢。

更多資訊，搜索微信公眾號juzimedia，關(guān)注橘子創(chuàng)意。