跳到主要內容

發表文章

目前顯示的是 三月, 2013的文章

偵測行動瀏覽器

很多網站除了桌面版本外,也會另外提供行動版本的網站
當然現在RWD的設計很流行,只是也不是所有的聲音都贊同就是
不過再說到這些設計需求時,有一個先決條件是要先判別瀏覽器是否為行動版本
判斷上我們會使用User-Agent當依據,這裡不多說
Detect Mobile Browsers 這個開源工具庫提供了方便判斷的小工具
而且具有Apache、ASP.NET、JSP、Python、C#、Rails等各種語言的版本

以下用最新下載的JavaScript版本(2013/3/27下載)來看

Chrome 設定小於12px的 font-size CSS 顯示問題

Chrome瀏覽器的 "進階設定" 預設網頁顯示的字體大小最小為12px
所以會有雖然CSS設定了 font-size 小於12px,但卻無法生效的情況
以前的解決方式是在CSS增加 -webkit-text-size-adjust:none; 這行
不過這個屬性已經不再被Chrome支援了,所以不要再想這件事吧...XD

Chrome 的這個設定算是設計上的思考,而不是bug
很多字體、特別是中文字之類結構較複雜的文字,在小尺寸時易變形、模糊
而維持 12px 也是讓瀏覽器上的閱讀保持易讀性的方法之一

範例 - JavaScript 實作可拖曳排序清單(sortable list)

這篇文章接續拖曳物件的教學
利用之前寫好的架構再接續較複雜的行為
示範的目標是一水平排列的清單內容,並做到藉由拖曳清單項目改變其排列順序
首先準備好兩種CSS,分別給一般狀態以及拖曳中狀態下的清單項目使用
.undrag {
    position:relative;
    z-index: 1;
    opacity: 1;
    filter: alpha(opacity=100);
    top: 0px;
    left: 0px;
    cursor: pointer;
}
.drag {
    z-index: 100;
    position:absolute;
    opacity: .50;
    filter: alpha(opacity=50);
    cursor: move;
}

範例 - JavaScript 實作可拖曳物件

實作成果示範


物件拖曳的重點在於物件位置的計算公式 - 目前滑鼠位置-起始滑鼠位置+目標位置
單純拖曳物件的話不算困難
說的上比較困難的是拖曳之後要結合的動作(如:drop、sortable list等)
雖然HTML5有Drag相關的API,不過這邊就先不提了
先做出一個能相容於老舊瀏覽器(IE)的版本
GitHub檔案目錄

PhoneGap 2.x包裝HTML文件為Android App

PhoneGap是一個行動開發框架
目的是讓開發者使用HTML5技術開發應用程式後,就能快速的部署到各平台
使開發者能專注在程式本身及減少學習上的成本
HTML5應用程式經過PhoneGap轉換後會變成原生應用程式
網頁本身會使用平台核心的瀏覽器功能讀取,例如:android.webkit.WebView
而透過呼叫PhoneGap的API,應用程式就能使用平台原生的相機功能、影片、音樂等

PhoneGap的官網:http://phonegap.com/
教學引導

在被Adobe買下後,PhoneGap的核心被捐贈給Apache基金會,並改名為Apache Cordova專案
本篇文章僅示範PhoneGap在Android平台的簡單使用
以Eclipse IDE為示範進行開發,建議先參考Android SDK開發環境設定
以下為開發工具版本,對於2.x版應該都適用
Eclipse:4.2 Juno
PhoneGap:2.5.0

Android SDK開發環境設定

開發Android程式需先安裝Java的JDK工具和Android SDK
Java的安裝參考以前文章,Android開發者網址為http://developer.android.com/sdk/index.html
在之前,Google的作法是將安裝套件拆開讓開發者自行搭配
但因為使用率不彰的關係,現在整合成ADT(Android Developer Tool)簡化開發者的安裝步驟
裡面包含了SDK本身、AVD模擬器以及Google為Android設計的Eclipse版本
雖然說開發不限定IDE的類型,但Eclipse是Google投入最多資源協助的IDE