HTML5 - web app 研究
最近研究 HTML5 最終也是想玩玩 web app ，真是個有趣的東東，web app 是直接利用 html5 做出的跨平台行動版網頁，但又多了 app 的功能，例如可以建立在手機桌面上小圖示，點下去時會產生歡迎頁面，另外加入離線網頁技術還可以讓瀏覽器保有快取的頁面，就算無線 wifi 關閉時也能開啟網頁，這時若是整合 RWD 的技術，開發 web 專案時更可以讓使用者無感跨平台障礙使用，當然若是考量效能與手機功能使用時，或許要針對開發的規劃而選擇原生 app 或者是使用其他的混合 app (cordavo) 等技術來考量，本編則先討論 web app 的技術心得。
優化 Web Content
為了區分手機跟桌面版本不同的 content，我們可以使用 Media Queries 來區分，在加上 max-device-width 和 min-device-width 去偵測整個頁面大小 (screen size)。 舉例來說，偵測 iPhone and iPod touch 裝置，可以透過底下載入 CSS
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
另外如果是 Desktop 版本可以加入底下
<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">
另外或者是直接在 CSS 裡面判斷:
@media screen and (min-device-width: 481px) { ... }
另外針對 screen 或 print 可以直接在 head 裡面寫入
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">
或者在 CSS 裡面寫入
@media screen {
#text { color: white; background-color: black; }
}
@media print {
#text { color: black; background-color: white; }
#nav { display: none; }
}
Viewport Meta Tag 設定
開發 iPhone 手機版 Web，為了符合 device 真正寬度，必須設定 viewport 的 width 等於 device-width。
<meta name="viewport" content="width=device-width" />
另外可以針對使用者可否放大或縮小螢幕，以及是否可以縮放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
initial-scale: 畫面初始化倍率 maximum-scale: 畫面最大倍率 minimum-scale: 畫面最小倍率 user-scalable: 用戶是否可以縮放畫面
設定 Web Applications
設定將網頁儲存為 home screen icon 的圖片路徑，預設值為 57×57
<link rel="apple-touch-icon" href="/custom_icon.png"/>
定義其他裝置 size 圖片
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
設定載入頁面時 loading 圖片
<link rel="apple-touch-startup-image" href="/startup.png">
隱藏底部 iPhone button bar，看起來更像 iPhone App
<meta name="apple-mobile-web-app-capable" content="yes" />
更改 status bar 樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
另外一個重點，當網頁載入完成後，可以隱藏 URL bar
window.onload = function(){
setTimeout(function(){
window.scrollTo(0, 1);
}, 100);
}
如果旋轉裝置，則必須在加上 resize event
// jQuery resize event
$(window).resize(function() {
window.scrollTo(0, 1);
});
如果不想讓使用者滑動網頁，可以加入底下
document.addEventListener("touchmove", function(event){
event.preventDefault();
}, false);
以上就是 web app 的語法技巧，另外離線網頁技術請參考另外 HTML5 的分享，下面則提供範例程式：
index.html
<!DOCTYPE html>
<html manifest="offline.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>test</title>
<style>body[orient="portrait"]>#main{min-height:480px;}body[orient="landscape"]>#main{min-height:320px;}#main{height:800px;}</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--iphone網址隱藏-->
<link rel="icon" type="image/x-icon" href="ic_launcher.png"> <!-- 57×57px -->
<link rel="apple-touch-icon" sizes="72×72" href="images/Icon-72.png"> <!-- 72×72px ipad-->
<link rel="apple-touch-icon" sizes="114×114" href="images/Icon@2.png"> <!-- 114×114px iphone4-->
<link rel="apple-touch-startup-image" href="startup.png">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<script src="url.js"></script>
<script src="resize.js"></script>
<script src="prevent.js"></script>
</head>
<body>
<div id="main">
web app hello world!
</div>
</body>
</html>
offline.manifest
CACHE MANIFEST
#This is a comment
CACHE:
index.html
url.js
resize.js
prevent.js
favicon.ico
ic_launcher.png
url.js
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1); }, 10);
});//隱藏網址
resize.js
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1); }, 10);
});//旋轉裝置
prevent.js
document.addEventListener("touchmove", function(event){
event.preventDefault();
}, false);//不想讓使用者滑動網頁
.htaccess
AddType text/cache-manifest .manifest
開啟網頁另存在桌面上會產生 app 圖示
當開啟 app 圖示時並不會產生網址，也無法讓使用者觸控螢幕放大(對於固定圖片非常好用)
顯示為網路應用程式(而非網頁)，另外該 web app 已經加入離線網頁功能，關閉無線 wifi 時點選 web app 圖示，仍然會開啟快取的網頁讓使用者進行離線流覽。
優化 Web Content
為了區分手機跟桌面版本不同的 content，我們可以使用 Media Queries 來區分，在加上 max-device-width 和 min-device-width 去偵測整個頁面大小 (screen size)。 舉例來說，偵測 iPhone and iPod touch 裝置，可以透過底下載入 CSS
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
另外如果是 Desktop 版本可以加入底下
<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">
另外或者是直接在 CSS 裡面判斷:
@media screen and (min-device-width: 481px) { ... }
另外針對 screen 或 print 可以直接在 head 裡面寫入
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">
或者在 CSS 裡面寫入
@media screen {
#text { color: white; background-color: black; }
}
@media print {
#text { color: black; background-color: white; }
#nav { display: none; }
}
Viewport Meta Tag 設定
開發 iPhone 手機版 Web，為了符合 device 真正寬度，必須設定 viewport 的 width 等於 device-width。
<meta name="viewport" content="width=device-width" />
另外可以針對使用者可否放大或縮小螢幕，以及是否可以縮放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
initial-scale: 畫面初始化倍率 maximum-scale: 畫面最大倍率 minimum-scale: 畫面最小倍率 user-scalable: 用戶是否可以縮放畫面
設定 Web Applications
設定將網頁儲存為 home screen icon 的圖片路徑，預設值為 57×57
<link rel="apple-touch-icon" href="/custom_icon.png"/>
定義其他裝置 size 圖片
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
設定載入頁面時 loading 圖片
<link rel="apple-touch-startup-image" href="/startup.png">
隱藏底部 iPhone button bar，看起來更像 iPhone App
<meta name="apple-mobile-web-app-capable" content="yes" />
更改 status bar 樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
另外一個重點，當網頁載入完成後，可以隱藏 URL bar
window.onload = function(){
setTimeout(function(){
window.scrollTo(0, 1);
}, 100);
}
如果旋轉裝置，則必須在加上 resize event
// jQuery resize event
$(window).resize(function() {
window.scrollTo(0, 1);
});
如果不想讓使用者滑動網頁，可以加入底下
document.addEventListener("touchmove", function(event){
event.preventDefault();
}, false);
以上就是 web app 的語法技巧，另外離線網頁技術請參考另外 HTML5 的分享，下面則提供範例程式：
index.html
<!DOCTYPE html>
<html manifest="offline.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>test</title>
<style>body[orient="portrait"]>#main{min-height:480px;}body[orient="landscape"]>#main{min-height:320px;}#main{height:800px;}</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--iphone網址隱藏-->
<link rel="icon" type="image/x-icon" href="ic_launcher.png"> <!-- 57×57px -->
<link rel="apple-touch-icon" sizes="72×72" href="images/Icon-72.png"> <!-- 72×72px ipad-->
<link rel="apple-touch-icon" sizes="114×114" href="images/Icon@2.png"> <!-- 114×114px iphone4-->
<link rel="apple-touch-startup-image" href="startup.png">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<script src="url.js"></script>
<script src="resize.js"></script>
<script src="prevent.js"></script>
</head>
<body>
<div id="main">
web app hello world!
</div>
</body>
</html>
offline.manifest
CACHE MANIFEST
#This is a comment
CACHE:
index.html
url.js
resize.js
prevent.js
favicon.ico
ic_launcher.png
url.js
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1); }, 10);
});//隱藏網址
resize.js
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1); }, 10);
});//旋轉裝置
prevent.js
document.addEventListener("touchmove", function(event){
event.preventDefault();
}, false);//不想讓使用者滑動網頁
.htaccess
AddType text/cache-manifest .manifest
留言
張貼留言