作者彙整: Han-Chiang Chou

利用phonegap及外掛程式，在加菲貓漫畫的android app加入檔案管理功能

發佈留言

在寫加菲貓漫畫離線閱讀android app的時候，遇到一個檔案容量的問題。於是希望在應用程式裡面加入：下載檔案、解壓縮檔案、和刪除檔案的功能。經過長時間的搜尋，終於找到利用phonegap的解壓縮api來解壓縮檔案、利用內建的file api來下載檔案、利用一段java script來刪除檔案，完成了我的需求。

閱讀全文 →

頁次: 1 2 3

在wordpress中顯示程式碼的外掛SyntaxHighlighter Evolved

發佈留言

最近在做android app製作的筆記，會用到很多程式碼，就去找了wordpress裡面的程式碼顯示外掛，這個SyntaxHighlighter Evolved很好用，除了可以顯示程式碼，以不同顏色顯示標籤，還可以加行號並針對特定行數高亮度顯示，很好用。

示範說明網頁：http://en.support.wordpress.com/code/posting-source-code/
Wordpress 外掛網頁：http://wordpress.org/plugins/syntaxhighlighter/

在phonegap中新增一個錯誤導向的頁面網址errorUrl

發佈留言

phonegap可以將網頁封裝成應用程式APP，如果網頁的連結內容有誤，想要將錯誤的連結導向特定頁面的話，就可以用errorUrl這個設定。

使用範例(phonegap版本2.3.0）：
在res->xml->config.xml中加入一行

<preference name="errorUrl" value="file:///android_asset/www/error.html" />

上面的範例會將錯誤頁面導引到assets/www/目錄下（也就是你的phonegap起始網頁index.html所在處）的error.html檔案。

注意：
1.導引值要以file:///的格式來寫，例如sdcard就是file:///sdcard/
2.file後面的斜線有三條
3.官方說明：http://docs.phonegap.com/en/2.4.0/guide_project-settings_android_index.md.html
4.原來splashscreen也可以在這裡設定，下次來試試看。

用PhoneGap把網頁做成應用程式 HTML to APP

4 則留言

為了把加菲貓漫畫的網頁離線版本做成手機應用程式，採用PhoneGap的工具來完成！

成果作品：
加菲貓漫畫倉庫APP（漫畫離線閱讀）：說明及下載頁面、手機直接連結到Google Play下載頁面。

這是一個真正免費，而且不會有惱人廣告的作法喔！！
閱讀全文 →

隨螢幕調整字型大小

發佈留言

在font-size的設定用vw或vh當單位，其中vw是相對畫面寬度，vh是相對畫面高度。

參考資料: css-tricks Viewport Sized Typography

但是手機的瀏覽器好像不支援？行動裝置好像要用em當單位，可是em當單位在一般瀏覽器好像又不行？

後來我在手機瀏覽模板的style.css檔裡面增加一個div的設定來解決。

讓首頁背景圖片符合視窗大小

發佈留言

每個訪客的畫面都不一樣大，為了讓背景圖片可以跟著縮放，可以在網頁裡加上這樣的語法。其中第一段是利用java script判斷訪客的畫面大小，第二段是用css調整背景圖片尺寸。

第一段，請加在script的標籤之間：

for (var i = 0; i < images.length; i++) { var image = images[i], width = String(image.currentStyle.width); if (width.indexOf('%') == -1) { continue; } image.origWidth = image.offsetWidth; image.origHeight = image.offsetHeight; imgCache.push(image); c.ieAlpha(image); image.style.width = width; }

第二段，請加在style的標籤之間：

body {
background-image: url(welcome.jpg);
background-size: 100%;
}

資訊來源：http://stackoverflow.com/questions/376253/stretch-and-scale-css-background