聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

四月 22, 2014
» 自己的手機自己修 – 換 Nexus 5 破裂螢幕

FIX iPhone 3GS

身為一個宅宅,自己的手機自己修也是很合理的事情。曾經自找麻煩修過難搞的 iPhone 3GS 電池、Home Button。

面板破裂的 Nexus5

最近 Nexus5 不小心在路邊摔到柏油路上,結果螢幕破裂。由於此手機手機是從日本 Google 直購回台,查了一下發現維修的費用大約在 TWD5000-5500. 把心一橫,乾脆自己更換面板看看。

拆機工具

 

所需裝備

  • 替換螢幕 – 網路上有螢幕總成與螢幕面板兩種。建議買總成。純換螢幕很麻煩, 只換面板需要用熱風槍拆下螢幕,再換上新的觸控螢幕,這需要比較精細的工藝技術,往往會在觸控面板間留下空隙。嫌麻煩的話可以買已加裝好電池的總成,省下重新拆解電池的功夫。
  • 塑膠開殼工具 – Nexus5 只用卡榫固定外殼,開殼工具可以方便把外殼撬開。技巧是找到卡榫位置,以扁平的塑膠板手推開卡榫。
  • T5 Torx Screwdrive 星形螺絲起子
  • Tri-point Screwdriver. Y型螺絲起子

拆掉外殼天線模組主機板天線

許多的賣家再銷售面板的時候會一併附上工具,不過我的型號使用 Y 型螺絲,與網路常見美版不同。因此額外加買了 Y 型螺絲起子。網路上有許多教學文件,這裡不多說明,以下是更換過程中所得到的經驗,僅供參考

  • 拆解的時候,有幾處電磁屏蔽膜是用膠水黏死,無法撕下來移到新面板總成上。新的總成上也沒有預留電磁屏蔽膜,可能會造成干擾。
  • 日本的 Nexus5 使用的螺絲是 Y 型與內六角兩種。
  • 雖然電池不是用膠水黏死,但是依然用了膠帶固定。移除時請小心,可稍微用熱風融掉黏膠。我不小弄破電池外殼,只好順便換一組。

電池外殼破裂

費用

  • 螢幕總成 3400+175 運費
  • Y型螺絲起子 300
  • 電池 500+55 =  550

以上費用為台幣。

更換完成

參考資料

 

一月 31, 2013
» 於 NOKIA N900 上安裝 w3m on Maemo 5

NOKIA N900 是支特別的智慧型手機,與其說是智慧型手機,用超迷你電腦來形容它才是比較合適的,當初凍仁會選上它的主要原因是可以在上面使用 Vim 這個強大的 Editor,可一年過去了 (當初為 2011 年 8 月入手),它的效能已不足繼續作為主力使用,畢竟是 2010 年的產品

現在凍仁將它轉戰 Console 機並推居二軍使用,對於一位專業的 Linux 網管來說,有個輕便小巧的 Terminal 是件很棒的事情,因為大部份的事情我們都可以靠命令列(command line)完成,然而在種類眾多的純文字瀏覽器裡凍仁慣用的是 w3m。

w3m 於 N900 上的截圖。


原先想在 N900 上安裝 w3m 可以使用 http://shimi.info/n900/ 提供的套件來源,而現在想在它上使用 w3m 除了自己編以外就剩 kumatux.org 提供的執行檔(binary code),不會編 ARM 的凍仁只好選擇後者的解決方案,也很幸運的讓它 work 了。

1. 環境設定

1.1. 新增 bin 目錄。
[ user@n900 ~ ]
$ mkdir bin && cd ~/bin

1.2. 補完執行檔路徑(PATH)。
[ user@n900 ~ ]
$ vi .profile
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/bin/X11:$HOME/bin

1.3. 重新讀取 PATH。
[ user@n900 ~ ]
$ source .profile

2. 下載 binary 並解壓縮

2.1. 下載 w3m.xxx.tar.xz
[ user@n900 ~ ]
$ wget http://kumatux.org/apps/w3m_0.5.2-void-not-ignored-patched_shiroikuma_2009-12-04-002333_fremantle_armel.tar.xz

2.2. 解壓縮 w3m.xxx.tar.zx。
[ user@n900 ~ ]
$ tar Jxvf w3m_0.5.2-void-not-ignored-patched_shiroikuma_2009-12-04-002333_fremantle_armel.tar.xz

2.3. 下載 gc.xxx.tar.xz
[ user@n900 ~ ]
$ wget http://kumatux.org/apps/gc_7.2alpha4_jj_2010-02-15-144600_fremantle_armel.tar.xz

2.4. 解壓縮 gc.xxx.tar.zx。
[ jonny@n900 ~ ]
$ tar Jxvf gc_7.2alpha4_jj_2010-02-15-144600_fremantle_armel.tar.xz

3. 安裝

3.1. 複製 w3m 執行檔。
[ jonny@n900 ~ ]
$ cp w3m_0.5.2-void-not-ignored-patched_shiroikuma_2009-12-04-002333_fremantle_armel/bin/w3m* ~/bin

3.2. 查看 w3m 所需的 libary 後得知還需補完 libgc.so.1。
[ user@n900 ~ ]
$ ldd ~/bin/w3m
        libm.so.6 => /lib/libm.so.6 (0x40030000)
        libnsl.so.1 => /lib/libnsl.so.1 (0x400a6000)
        libdl.so.2 => /lib/libdl.so.2 (0x400c2000)
        libgc.so.1 => not found
        libncurses.so.5 => /lib/libncurses.so.5 (0x400cd000)
        libgcc_s.so.1 => /lib/libgcc_s.so.1 (0x40114000)
        libc.so.6 => /lib/libc.so.6 (0x40127000)
        /lib/ld-linux.so.3 (0x40000000)

3.3. 使用 root 權限。
[ jonny@n900 ~ ]
$ sudo gainroot

# 若有安裝 rootsh 可以使用 root 指令。

3.4. 補完 libgc.so.1。
[ root@n900 ~ ]
$ cp /home/user/gc_7.2alpha4_jj_2010-02-15-144600_fremantle_armel/lib/libgc.so.1.0.3 /lib/libgc.so.1

3.5. w3m 補完 libary 計劃完成。
[ user@n900 ~ ]
$ ldd ~/bin/w3m
        libm.so.6 => /lib/libm.so.6 (0x40030000)
        libnsl.so.1 => /lib/libnsl.so.1 (0x400a6000)
        libdl.so.2 => /lib/libdl.so.2 (0x400c2000)
        libgc.so.1 => /lib/libgc.so.1 (0x400cd000)
        libncurses.so.5 => /lib/libncurses.so.5 (0x400cd000)
        libgcc_s.so.1 => /lib/libgcc_s.so.1 (0x40114000)
        libc.so.6 => /lib/libc.so.6 (0x40127000)
        /lib/ld-linux.so.3 (0x40000000)

4. 執行及測試

4. 執行 w3m。
[ user@n900 ~ ]
$ w3m note.drx.tw

恭喜!現在我們可以在 N900 上愉快的使用 w3m 了 :-)

站內連結:
w3m - 自訂快捷鍵(keymap)

相關連結:
Install kumatux.org on Nokia N900 | kumatux.org
Download kumatux.org | kumatux.org
Applications | kumatux.org

資料來源:
GNU Emacs 23.1.1 for Nokia N900 - Page 6 - maemo.org - Talk
Run any app fullscreen - Page 2 - maemo.org - Talk


# 本文同步發佈於 自由軟體鑄造場 (OpenFoundry)

一月 8, 2013
» 「高雄場-華碩平板系列體驗會」體驗續航,追求極致

很榮幸再次得到參加T客邦所舉辦的體驗會活動,這次體驗的機器是三台平板電腦分別是 Google Nexus 7, ASUS Transformer Pad (TF700) 以及 ASUS VivoTab (TF600)。

老實說凍仁這次是衝著 Nexus 7 報名此次的體驗會,身邊已有不少前輩入手它,加上國外已有熱心的伙伴將 Ubuntu 移植至上去,便宜又大碗的它就算哪天玩膩了還可以拿來跑 Ubuntu,說是物超所值也不為過。


▲ 由上而下依序為 Nexus 7, TF700, TF600。

1. 筆記整理


雖說本次體驗會的 Session 只比先前 Samsung Galaxy Note 2 體驗會 多一個主題,可硬體部份可是多了兩台,實在是有些消化不良,在繁忙之餘只好使用心智圖軟體來整理這次的筆記。


▲ 此心智圖使用 FreeMind 製作,附上 HTML 版連結。

2. 規格大亂鬥


以下為 Nexus 7, TF700, TF600 的規格比較表,建議依造其需求來採購,已達到最高的邊際效益。

Nexus 7 TF700T TF600
Operating System Android 4.1 / 4.2 Android 4.0 Windows RT
Office Home & Student 2013 RT Preview*
Display 7" WXGA (1280x800) Screen
IPS Panel
10 finger multi-touch support
10.1" WUXGA (1920x1200) Screen
Super IPS+
10 finger multi-touch support
10.1" WXGA (1366x768) Screen
Super IPS+
Multi-touch Support
CPU NVIDIA Tegra 3 Quad-Core @1.2Ghz NVIDIA Tegra 3 @1.6Ghz NVIDIA Tegra 3 @1.3Ghz)
Memory 1 GB 1 GB 2 GB
Storage 8GB/16GB/32GB *1 32GB / 64GB *1 EMMC + 8G life time ASUS Webstorage space *2 32GB/64GB eMMC *1
32GB life time ASUS Webstorage Space *2
Network Standard HSPA+ UL:21 Mbps/DL:5.76 Mbps
3G :
WCDMA :
850/900/2100
2G :
GSM : 850/900/1800/1900,
Not yet DC-HSPA+ UL:5.76 Mbps/DL:42 Mbps
Wireless Data Network WLAN 802.11 b/g/n @2.4GHz, Bluetooth V3.0 WLAN 802.11 b/g/n@2.4GHz
Bluetooth V3.0+EDR
WLAN 802.11 b/g/n @2.4GHz, Bluetooth 4.0
Camera 1.2 MP Front Camera 2 MP Front Camera
8 MP Rear Camera
Auto focus (rear) with Flash
BSI Sensor
5-element lens
2 MP Front Camera
8 MP Rear Camera
Auto focus (rear) with Flash
Audio unknown
High Quality Speaker
High Quality Mic2 MP Front Camera
8 MP Rear Camera
Auto focus (rear) with Flash
BSI Sensor
5-element lens
Stereo Speakers
Interface Headset Jack,
1x micro-USB, 2x Digital microphone,2x High Quality Speakers,
1x Docking PIN
Pad:
1 x 2-in-1 Audio Jack (Headphone / Mic-in)
1 x micro HDMI
1 x Micro SD Card Reader

Mobile Dock:
1 x USB2.0 port
1 x SD Card Reader
Pad:
1 x 2-in-1 Audio Jack (Headphone / Mic-in)
1 x micro HDMI
1 x Micro SD Card Reader (SDXC)

Mobile Dock:
1 x USB 2.0 port
Sensor G-Sensor, Light Sensor, Gyroscope,
E-compass, GPS, NFC, Hall Sensor
G-Sensor, Light Sensor, Gyroscope, E-compass, GPS G-Sensor, Light Sensor, Gyroscope, E-compass, NFC, GPS
Battery WiFi:9.5 hours, 4325mAh,*2
16Wh Li-polymer

3G:9 hours, 4325mAh,*3
16Wh Li-polymer
Pad Only:
9.5 hours; 25Wh Li-polymer Battery *3

Pad with Dock:
14 hours pad with dock; 25Wh(pad) + 19.5Wh(dock) Li-polymer Battery*3
Pad only:
9 hours; 25Wh Li-polymer Battery *3

Pad with Dock:
16 hours ; 25Wh(Pad) + 22Wh(Dock) Li-polymer Battery*3
Size 198.5 x 120 x 10.45 mm 263 x 180.8 x 8.5 mm 262.5 x 170.9 x 8.3 mm
Weight 340 g 598 g 525 g
Mobile Docking No
Dock only:
Dimensions: 263 x 180.8 x 8~10.4mm
Weight: 537g

Pad with dock:
Dimensions: 263 x 180.8 x 16.5~18.9mm
Weight: 1135g
Dock only:
Dimensions: 262.5mm(W) x 169.9mm(D) x 10.2(H)mm
Weight: 538g

Tab with Dock:
Dimensions: 262.5mm(W) x 170.9mm(D) x 18.7(H)mm
Weight: 1036g
Price NT$ 8,990
NT$ 20,900 NT$ 21,900
▲ 資料來源:ASUS (Global / English)

3. 活動心得


3.1. Nexus 7


相信這次體驗會有不少伙伴是為了這台 Nexus 7 而來的,一來是因為夠便宜,二來是規格足以應付日常使用,再加上小巧方便攜帶。


3.2. ASUS TF700 - Transformer Pad


在眾多平板的產品中,Samsung 選擇了觸控筆的路線,而 ASUS 則是往鍵盤發展,這點對凍仁而言是件好事,對一位 鍵盤愛好者 常需要輸入指令管理系統的人而言這真的是不可或缺的,如果可以再搭配個有小紅點的機械式鍵盤那該有多好!

體驗過程中,有發現到 TF700 在筆電模式 (Pad + Dock) 時,若 Pad 在上 Dock 在下會有 SD 卡不易取出的情形,這點應與為了人體工學而設計出來的幅度有關,只需闔上即可輕易取出。


3.3. ASUS TF600 - VivoTab


在具有生產力 (鍵盤) 的平板上搭載 Windows like 的作業系統似乎是件很棒的事情。平常外出、通勤可以使用 平板 動態磚 (Metro) 模式;回到辦公室後可切回 Windows 7 like 模式繼續辦公。比較可惜的是 Windows RT 是專屬 ARM 架構的作業系統,這代表著它不支援 x86 架構 (桌機、筆電) 的應用程式,需使用 ARM 編譯過的版本,這點 Microsoft 已設計出商城 (Store) 系統以便利使用者取得這些特殊的軟體。

可以知道的是,目前 Microsoft 早已推出 ARM 架構的 Office,相信這點可以大大的為 TF600 加分才是。


3.4. NVIDIA Tegra 3


體驗會當天接觸到的 Nexus 7, TF700, TF600 操作起來的感覺都不錯,在一個追求效能及續航力的現在 NVIDIA Tegra 3 所使用的 4-Plus-1 是個不錯的想法,除了會變頻的四顆核心以外,更增加了一顆低功耗的核心來達到真正的省電。

在影片播放的部份也因為 Tegra 3 支援硬體解碼的緣故,可省下原先看高畫質影片時的高功率輸出,與 Tegra 2 相比更能省下 60% 以上的電力,相信這對愛在平板上看影片的伙伴是一大福音。


最後基於效能、使用者體驗、作業系統、支持國貨 ... 種種原因,凍仁待的單位已將 TF700 列入明年度採購的機器,也就是說再過不久 就有機會 可以再次把玩 TF700 了!



本文同步發佈於 T 客邦 - T17 討論區PlurkFacebookGoogle+

延伸閱讀:
分清楚,別買錯了!Windows 8和Windows RT大不同 - Yahoo!奇摩新聞
Window RT平板啟動 ASUS Vivo Tab RT首發速看 - Mobile01 本站新聞
Windows 8 切換回舊桌面樣式的小技巧 | 硬是要學
NVIDIA 次代 Tegra 的 vSMP 架構,宛如應用處理器界的油電混合車 (製程錯誤修正) | 癮科技

相關連結:
華碩&NVIDIA 變形平板 台中、高雄深度體驗會花絮 | T客邦
搜尋:華碩平板系列體驗會 | T17 討論區

一月 2, 2013
» 「Samsung Galaxy Note 2 體驗會」S3, Note2 傻傻分得清楚

對今年六月剛入手 Samsung Galaxy S3 的凍仁而言,真的是方便不少,但是對一位筆記愛好者而言還是有些許不足,頂多只能做到拍照上傳,總是有種少了點什麼的感覺。不是說手寫筆記不好,只是當資料一多時就很難找得到真正想找的資料也不易收藏

親自接觸過 Note2 以後,真的很想換一支 Note2 回來。對一位部落客而言,靈感真的很重要,而且常常一閃而逝!在下也寫了四年多的文章,很多時候光靠文字表達是不夠的,至於電腦繪圖嘛,還是留給專業人士來比較好,若有簡易又跨平台的繪圖軟體不妨推薦一下


▲ Note 2 直立。


▲ Note 2 橫放。


▲ Gamsung Galaxy S3 與 Note2 合照


▲ 網頁瀏覽。


▲ 各種筆對照,依序為 Note 2, Note 10.1, S3, 自動鉛筆。


▲ 隔壁伙伴的 Note 10.1。

1. 用戶調查

  • 在全球,S Pen 使用率只佔了 10%,可台灣卻高達 30%。
  • 83% 的用戶會推薦朋友購買 Note,然而有 76% 的使用者願意購買下一代的產品。

2. Note 2 與 Note 的差異

  • 外型變成放大版的 S3。
  • S Pen 從圓形變成三角形,握感提升。
  • 不用再怕搞丟 S Pen,因為當它離開 Note 2 後,走超過 10 步會有提示訊息。
  • 螢幕解析度從 16:10 變成 16:9,整體上 Note 2 是變瘦變長又變薄。

3. 懸浮預覽 (Air View)


搭配 S Pen 達到的各式預覽功能,其支援的有:
  • 內建的電子郵件 (Gmail 不支援)。
  • 媒體瀏覽器。
  • 影片播放器: 除了可預覽所有的影片以外,播放影片時下方的進度列也可預覽 (類似 YouTube)。

3.1. 更炫的媒體瀏覽器

媒體瀏覽器其實就是相簿,我們可以在裏面找到所有的相片 (手機, Facebook, Picasa ...),而 Note2 這次除了可以用 S Pen 達到懸浮預覽 (Air View) 以外,更多了兩個排列相片的特效。

還有個功能很炫,那就是可以在相片的背面寫字,好比現實中的相片後常會寫些備註,可惜沒拍到


▲ 首先來看看 S3 的媒體瀏覽器。


▲ 再看 Note 2,可以發現右上角多了個 3x3 的圖示。


▲ 其實是讓照片排排站的特效。


▲ 使用排排站特效快速瀏覽照片。


▲ 另一種會在手機裡刮起相片龍捲風。


▲ 使用龍捲風特效快速瀏覽照片。

4. 擁有塗鴉牆的 S Planner

S Planner 是 Samsung 家預載的行事曆 Apps,可以用來同步 Google, Google Apps, Facebook 以及 Exchange 上的行事曆,而這次在 Note 2 更多了個塗鴉牆,這種將行事曆與手寫結合的感覺挺不賴的!


▲ 附上 S3 的 Planner 對照。


▲ Note2 家在上角多了個行事曆與筆的圖示。


▲ 塗鴉牆現身。

5. S Note

  • 在任意時刻按下 S Pen 上方的按鈕並在 Note 2 上點兩下即可開啟 S Note。
  • 通話時將 S Pen 抽出來時也會自動喚醒 S Note。
  • 當 S Pen 移至 S Note 上方的工具列時,會跳出各個圖示的提示文字。

6. 子母畫面

  • 影片播放時,可做到子畫面的放大、縮小。
  • 後期將會補上類似 Note 10.1 的左右視窗 (分割畫面) 功能

7. 快速筆勢


透過各種筆勢操作 Note 2,這對喜愛滑鼠手勢的伙伴來說可是一大福音呢。
  • 可自訂專屬筆勢。
  • ?: 使用網際網路搜尋。
  • @: 開啟電子郵件。
  • !:開啟地圖。
  • #:開啟播號鍵盤。
  • ~:編寫訊息 (SMS)。
  • 寫 C 會開啟 ChatON。

8. 自由擷取 (Easy Clip)

在 NOTE2 眾多的功能中,這是凍仁最喜愛的功能,它可以於任意畫面中,自由的剪裁畫面並快速編輯,這對保留靈感及創意的部份可是有很大的幫助!一般光是要先截圖、裁切並開啟後製 Apps 可是得花上不少時間呢。


▲ S3 只能事後使用 Apps 做細部修圖。


▲ 而 Note2 只要使用 按下 S Pen 上的按鈕圈選預擷取的區域即可,然後可以丟到剪貼簿、直接使用 S Note 開始筆記或者直接寄信都行。


▲ 剪貼簿裡的截圖。


▲ 開啟 S Note 後即可插入剪貼簿中的圖
(來不急實作只好拿老師的範例充數)。

9. 創意素描


透過各種文字記下各種靈感,當然也可建立自己的素描 (草圖) 庫。

10. 快拍

  • Note2 支援 20 連拍 (S3 只有 8 連拍)。
  • 最佳臉部表情: 可做到只更換特定人士之臉部表情。

11. 錄影

  • 新增慢動作播放功能,以後可以自己拍洗髮精廣告跟武打片了
  • 可自動偵測地點及天氣,並寫入影片屬性。

12. 續航力

相信不少伙伴都在續航力這塊都挺擔憂的,這點也是當初會挑選 S3 很重要一個環節,雖然凍仁不能保證 S3 待機的時間比他家還久,但凍仁可以保證只要您多買個原廠電池充電座 (以下簡稱座充) 就可以大大的解決此一難題。


▲ 以下將以 Gamsung Galaxy S3 的座充示範。


▲ 平日有 AC 電源時可以使用原廠附的旅充充電。


▲ 外出時可直接使用行動電源充第二顆電池 (重點是 Micro USB IN)。


▲ 合體!


▲ 合體側照。


▲ 換邊。


▲ 掀開電池蓋。


▲ 合體後是不是有種拿 ThinkPad 接長效型電池的感覺呢 (笑)

沒錯!Samsung 的座充是可以使用行動電源充電的,這樣出門在外時就可以減少邊充電邊玩手機的情形了,手機再輕多了顆行動電源要拿在手上還不是惘然,有了 T 客邦送的 apbs 2500mAh 行動電源簡直是如虎添翼,這樣三顆電池絕對夠用!凍仁也有 8,000mAh 的行動電源,但在重量 (電量與其重量成正比) 與實用性 (很少會充到電,頂多充一次) 考量下,平時是不會想帶上它的。

13. 戰利品


▲ 戰利品大集合 (PChome 雜誌 *1、apbs 2500mAh 行動電源 *1、小衛兵耳機塞 *1)。


▲ 小衛兵真的是很可愛呢 (早已充公了)。


▲ 小衛兵與 S3 合照。


▲ 最後附上與 Simlo 以及凌星星主持人的合照 :)



本文同步發佈於 T 客邦 - T17 討論區PlurkFacebookGoogle+

2012-11-07


謝謝各位評審及各位伙伴的支持,讓凍仁拿了個「T客邦心得優質獎」,真的是太謝謝大家了。
Facebook 上的得獎公告。

獲得 Hughes 真皮平板保護包一枚。

相關連結:
《Samsung GALAXY Note II 》前進金典,高雄獨家體驗會花絮 | T客邦
Samsung GALAXY Note II體驗會,徵文活動得獎公佈 | T17 討論區
搜尋:samsung galaxy note | T17 討論區
GALAXY Note II 生活日記 - Samsung.com

資料來源:
再發揮創意:Samsung Galaxy Note 2 測試 - DCFever.com

七月 17, 2012

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 開發 iPhone Mobile Web App 一些小技巧

開發 Mobile Web App 有好一陣子,底下來紀錄過去開發的一些經驗以及 iPhone 上面一些 meta 的設定小技巧,適用於 Mobile Web 開發,如果有任何錯誤,請大家可以留言給我,也或者有不錯的建議都可以一起討論。不過此篇文章會比較偏向 iOS iPhone Device 上面的開發技巧。那廢話不多說了,來看看設計 Mobile 需要注意哪些事項。

良好的設計模式

底下是 Web 程式設計師應該注意的事項

  • html 檔案必須宣告 DOCTYPE 型態
    以目前 HTML5 就必須寫成 <!DOCTYPE html>
  • 完全區隔 HTML, CSS, 和 JavaScript 檔案,以便將來好維護或擴充
  • 完整的 html 架構,不要少個單引號或雙引號,或是少寫 close tag

優化 Web Content

為了區分手機跟桌面版本不同的 content,我們可以使用 Media Queries 來區分,在加上 max-device-widthmin-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);

Reference:

Configuring an iPhone Web App With Meta Tags
iOS Developer Library

Related View

一月 6, 2012

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Windows Titanium Mobile 入門安裝紀錄

PROD_tit_mobile

最近安裝 Windows 版本 Titanium Mobile SDK 遇到蠻多地雷,也不確定官方什麼時候會把這 Bug 解掉,安裝過程可以參考閃光大部落格 [Titanium note.] Titanium Mobile, Windows + Android 入門安裝,其實最主要就是三個套件必須安裝:

請務必註冊 Titanium Studio 新帳號,不然沒辦法下載安裝檔案以及登入使用 Titanium Studio,下載好三個檔案後,請務必注意底下事項,免的安裝好之後沒辦法在 Titanium Studio 測試模擬器。Java SDK 就直接下載安裝,這邊比較沒有問題。

1. Android SDK 請務必安裝在 C:/ 底下即可,不要安裝在 “C:/Program File”
2. 安裝完成務必增加 Path 路徑,ANDROID_SDK 跟 JAVA_HOME

ANDROID_SDK: C:\android-sdk
JAVA_HOME: C:\Program Files\Java\jdk1.6.0_30

最後注意 Titanium Studio 的 mobilesdk 編譯模擬器的程式,因為執行編譯指令沒有加上 quote 符號,所以造成 SD Card 錯誤,所以請找檔案 mobilesdk/win32/1.7.5/android/builder.py,將 405 行處的程式碼換掉,原本是

self.sdcard,

請改成

'\"' + self.sdcard + '\"',

Related View

八月 12, 2011

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 推薦一本書籍 Master Mobile Web Apps with jQuery Mobile

master-mobile-web-apps-with-jqm
在這裡跟大家推薦一本國外的書籍,也就是 Elated.com 網站作者 Matt Doyle 推出的一本新書 Master Mobile Web Apps with jQuery Mobile,此作者也有推出 PHPPhotoshop 的書籍,本人相當佩服有美工天份又會寫程式人才。然而現在當紅的 Mobile Device,大家相繼為了 iOS, Android 或其他手持式裝置撰寫 Web 介面,目前網路上大家推的其中一套就是 jQuery Mobile,而我呢,正在摸索另一套強大的 Web App Framework: Sencha Touch,功能來比的話,個人覺得 Sencha Touch 優勢比較多,之後有機會再來寫一系列的 Sencha Touch 文章。此書有提供目錄可以參考,該作者會教大家如何搭配 PHP 跟 MySQL 結合 jQuery Mobile API 來撰寫程式,書籍應該是蠻完整的,目前售價美金19元,如果有興趣的人可以上網下單。

Related View

support:

biggo.com.tw

biggo.sg

A Django site.