導航:首頁 > 軟體問題 > html怎麼寫app

html怎麼寫app

發布時間:2024-05-14 12:58:56

Ⅰ 怎麼用HTML5開發手機app

你說的這個主要製作思路是使用響應式設計,結合html5和css的一些特性製作(主要版是css3的媒體檢查,根據不同視口載權入不同樣式),但製作出來的東西能否被稱為手機app,這個還要看功能,如果你製作出來的東西能完成某些功能或者某種任務,這能被叫做webapp,如果不能就不要叫什麼app,最多算是一種手機展示方式。
至於安卓和ios版本的問題,考慮主要是圖片解析度的問題,區別不大。

Ⅱ 怎樣用html和javascript製作離線手機app

首先用HTML和JavaScript寫好你的應用。然後通過Android里的WebView載入一下就行了。把文件放到工程的assets目錄里:

webView.getSettings().setJavaScriptEnabled(true);
ebViewwebView=(WebView)findViewById(R.id.webView1);webview.loadUrl("file:///android_asset/file.html");

Ⅲ 如何用html5構建移動端的webapp

H5e教育html5開發為您解答:
移動web在當今的發展速度是一日千里,作為移動領域的門外漢,在這段時間的接觸後,發現前端開發這一塊做一個小小的總結。
1.四大瀏覽器內核
1.Trident (IE瀏覽器) :因為在早期IE佔有大量的市場份額,所以以前有很多網頁是根據這個Trident的標准來編寫的,但是實際上這個內核對真正的網頁標准支持不是很好,同時存在許多安全Bug。
2.Gecko:( FireFox )優點就是功能強大、豐富,可以支持很多復雜網頁效果和瀏覽器擴展介面,缺點是消耗很多的資源,比如內存。
3.Webkit: ( Chrome/ Safari / UC )優點就是Webkit擁有清晰的源碼結構、極快的渲染速度,缺點是對網頁代碼的兼容性較低,會使一些編寫不標準的網頁無法正確顯示。
4.Presto: ( 歐朋 ) Presto內核被稱為公認的瀏覽網頁速度最快的內核,同時也是處理JS腳本最兼容的內核,能在Windows、Mac及Linux操作系統下完美運行。
移動端開發主要對象是手持設備,其中絕大部分是IOS和Android系統,基於Webkit內核,可使用Chrome瀏覽器調試即可。
2.手機瀏覽器
瀏覽器已經逐漸從傳統桌面轉向手機端,競爭也越來越激烈。目前國內市場主流的手機瀏覽器:UC、網路、歐朋、QQ、海豚、safari、Chrome,這些瀏覽器都是基於webkit內核的,兼容性方面不存在問題,同時對html5和css3的支持很好,所以,大膽地應用html5和css3技術吧。
在開始編寫webapp時,前端工程師使用HTML5,而放棄HTML4,因為HTML5可以實現一些HTML4中無法實現的豐富的WEB應用程序 的體驗,可以減少開發者很多的工作量,當然了你決定使用HTML5前,一定要對此非常熟悉,要知道HTML5的新標簽的作用。比如定義一塊內容或文章區域 可使用section標簽,定義導航條或選項卡可以直接使用nav標簽等等。
3.終端解析度
手機解析度比PC解析度要龐雜得多,各種解析度有木有?大小差距那麼大有木有?這在一定程度上給頁面製作帶來了不小的麻煩。所以針對這樣的因素,必須有充分的考慮。考慮到瀏覽器自適應,需要設計和製作完成各種不同的方法。
1) 市場上主流手機生產商的產品解析度。經過調研發現,目前主流的手機解析度為:480*800像素、320*480像素,而1280*720像素(720P)會是接下來的趨勢。這些都是很粗略的統計,要有精確的數據需要花費不少的精力,那是數據分析人員的工作。
2) 項目目標群所持設備的解析度。項目目標群即用戶,用戶擁有什麼樣的手機解析度,從一定程度上來說比第一點來得更加重要,它決定著項目開發的方向。
4.響應式web開發
在編寫CSS時,我不建議前端工程師把容器(不管是外層容器還是內層)的寬度定死。為達到適配各種手持設備,我建議前端工程師使用自適應布局模式(支付 寶 採用了自適應布局模式),因為這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示,你無需再次考慮設備的解析度。
響應式web開發不是一項開創性的技術變革,簡單地說,響應式web設計採用了媒體查詢、流式布局、液態圖片三項技術,把它們組合在一起來製作頁面,使得頁面不只在傳統桌面,在平板電腦和手機上,各種不同的解析度都能夠完美顯示。而要做到這點,我覺得不難,請繼續往下:
1) 准備工作:
a) 插件安裝:window resize。您可以通過下載安裝谷歌瀏覽器插件,安裝成功後,當您調整瀏覽器窗口時,在瀏覽器右下角會有灰度提示當前窗口和類似於手機視圖的大小提示。
b) 編輯器安裝:Hbulder或Webstorm
c) 弄清視圖和屏幕的區別。視圖是瀏覽器的內容顯示區域,屏幕是設備的物理顯示區域。比如視圖寬度我們一般用width表示,而屏幕寬度是用device-width來表示。相信做過手機頁面的童鞋都經常見過這段代碼:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
其中width=device-width就是說把頁面寬度設置成和屏幕寬度一樣。
d) 響應式設計創意網站收集 。這里有很多響應式Web設計的網站,供您參考和學習。
2) 征途ING:
e) 響應式web設計之媒體查詢:
為了減少http請求,我想在css樣式表裡進行媒體查詢會是個不錯的選擇,而不是在頁面head部分使用link進行載入。樣式表裡的媒體查詢格式為:
@media screen and (max-width:960px){}
大括弧內部書寫樣式。該語句相當於判斷語句,有兩個條件,一個是視口寬度最大不超過960px,screen代表顯示屏,這兩個條件都具備了,就調用大括弧內的樣式。
f) 響應式web設計之流式布局:
流式布局以百分比進行布局。最重要是時刻關注元素的父級層,所有的元素都是以父級層為基準。流式布局的應用是為了和媒體查詢完美地結合,形成平滑的布局變 化跳轉效果。一般而言,media里的樣式多以width、padding、margin、font-size、line-height這些為主。
g) 響應式web設計之液態圖片:
要實現液態圖片,只需加入如下代碼:img{max-width:100%;}
web移動頭部書寫

1、首先我們來看看webkit內核中的一些私有的meta標簽,這些meta標簽在開發webapp時起到非常重要的作用
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
這個meta標簽表示:強制讓文檔的寬度與設備的寬度保持1:1,並且文檔最大的寬度比例是1.0,且不允許用戶點擊屏幕放大瀏覽;
<meta content="yes」 name=" apple-mobile-web-app-capable" />
meta標簽是iphone設備中的safari私有meta標簽,它表示:允許全屏模式瀏覽;
<meta content="black" name=" apple-mobile-web-app-status-bar-style" />
meta標簽也是iphone的私有標簽,它指定的iphone中safari頂端的狀態條的樣式;
<meta content="telephone=no" name="format-detection" />
meta標簽表示:告訴設備忽略將頁面中的數字識別為電話號碼

Ⅳ 手機app的界面用html能寫么

可以,不過你需要找人給你寫一個app框架,這個框架的作用就是包含你的html頁面,裡面的頁面樣式,程序,鏈接,就按照正常的來就可以了

閱讀全文

與html怎麼寫app相關的資料

熱點內容
07版的excel怎麼加密文件 瀏覽:966
文件根據儲存內容可以劃分為什麼 瀏覽:316
安裝win10會4k對齊嗎 瀏覽:385
t8cad文件怎麼打開 瀏覽:275
英語趣配音網路未連接 瀏覽:740
linuxdeb文件安裝 瀏覽:153
word如何在箭頭上寫字 瀏覽:821
安全刪除數據為什麼要重寫硬碟 瀏覽:873
稅務系統網路與信息安全應急保障工作框架 瀏覽:407
淘寶背景代碼生成 瀏覽:649
小學特色託管編程圖形如何 瀏覽:748
編程實驗分析怎麼寫 瀏覽:58
滑鼠編程宏怎麼設置 瀏覽:100
怎麼清除百度登錄過網站 瀏覽:503
linuxl2 瀏覽:116
蘋果升級一直重啟怎麼解決 瀏覽:827
農商銀行app怎麼登錄不上去 瀏覽:47
查看已連接寬頻密碼 瀏覽:822
日本創建購物網站需要什麼 瀏覽:723
數據拐點什麼時候出來 瀏覽:640

友情鏈接