標籤: browser

分類
Javascript

jQuery Mobile版本

從阿維筆記本這裡 (http://blog.hsdn.net/1465.html) 看來的, 原來 jQuery 也有 mobile 的版本! 官方網址在這裡: http://jquerymobile.com/

隨著手機的效能愈高, 能支援的網頁複雜度及相容性, 也隨著在手機上的行動瀏覽器而提升, 一般早期在做手機網站大多是單純化, 減少不相的 css 及簡單呈現的方式為主, 不過有了 jQuery for Mobile, 相信又有更多的可能.

這個列表是用來說明目前 jQuery Mobile 支援各型手機 os 及瀏覽器的相容狀況, 共分成了 A, B, C, F 4級, A 為品質最好, B 為次之, C 為較差, 而 F 則是無法相容, 圖片引用自: http://jquerymobile.com/gbs/

看起來相容性最好的是 android 方面的瀏覽器.

有 jQuery for Mobile 對於行動網頁開發者來說, 可以節省不少工夫在實作網頁程式上, 不過行動網頁的要求是更精簡, 更容易地操作, 利用這樣的開發工具, 的確也能減低不少負擔. 來看看 ui 上的狀況: http://jquerymobile.com/designs/

相信對於已經上手 jQuery 的 Developer 們, 這個是一個不錯的好工具!

分類
懶得分類

IE9/Safari5/Firefox3/Chrome大車拼

繼剛寫了Safari5發表的文章後, 想說順便跑一跑其他家的一起來拼一拼.

以下測試 ACID3 是用: http://acid3.acidtests.org/
而 javascript 效率的 Webtest 是用: http://www.101asian.com/webtest.htm

先來看看 IE9 的:
UA: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)(HTTP_USER_AGENT)

ACID3: 68分
WEBTEST: 27ms
再來是 Safari 5的:

閱讀全文 “IE9/Safari5/Firefox3/Chrome大車拼”
分類
程式技術

IE6還這麼多人用耶

剛在看這篇文章: IE 6在臺市占率仍超過5成 (http://www.ithome.com.tw/itadm/article.php?c=56054), 發現其實我的想法比較偏向所謂的用戶原始的瀏覽器用什麼, 就會持續用下去的這個狀況, 也就是說, 用戶應該在 XP 就會用 IE6, 在 Vista 就會用 IE7, 在 Windows 7自然用 IE8, 而其中的許多數據也都相當耐人尋味.

用戶自己會選擇使用什麼瀏覽器的, 自然是比較了解電腦, 或是會自己安裝軟體的用家, 而且通常應該要原來固定使用的瀏覽器發生什麼大問題, 或效能不好, 或速度慢等原因, 才會面臨升級或是換瀏覽器的狀況.

不過這也讓我想看一下這個網站的比例狀況(2009/07), 我列出來給大家參考:
狀況如下:

IE6 29.1%
IE7 17.9%
IE8 9.6%
FX3.5 6.8%
FX3.0 10%
SAFARI 3.5%
OTHER 23.1%

其中果然 IE6 佔了大多數, 到 29.1% (相對於上文的報導是沒有那麼高), 而整個 IE 也有 56.6%, 另外 Firefox 則是有 16.8%, Safari 則是 3.5%, 其他的部分包含較小量版本的 IE, FX, 及一些有的沒的, 共有 23.1% (這個也還蠻多的, 真有趣), 整理或圖形如下:

基本上, 網站其實就是要照顧到所有用戶使用的環境來設計功能及呈現, 才不會影響用戶的來訪, 不過, 最重要的是大家都要依照標準來做就對了, 才不會顧此失彼, 這樣也就沒什麼太大的相容性問題!

順便附上 OS 比例也供參考:

用Firefox體驗IE8

這句乍看下很有趣, 怎麼用 Firefox 體驗 IE8 呢?

原來是個愚人節的活動, 不過現在來報好像有一點 lag 了.. 從這裡看來的, 來體驗 IE8 的全新功能吧 http://blog.timc.idv.tw/posts/come-and-experience-ie8/ 還有有趣的連結呢:

http://ww12.stickeraction.com/

原來這個 link 是到這裡的: http://www.moztw.org/events/ie8/, 很有趣吧, 快連去看看, 怎麼用 Firefox 來體驗 IE8. 其實這個活動有點揶揄, 有點諷刺, 對於 IE8的上線, 給了一個很有趣的愚人節禮物. 不過下面也寫得十分有趣, 有關於 IE8 的長處:

  1. IE8 終於跟上其他先進瀏覽器的腳步，較為完整地支援了 CSS 2.1。這麼一來網頁設計師可以設計更為美觀的網頁，不必擔心僅有 IE 看不到效果的問題。
  2. 「視覺化搜尋」是其他瀏覽器目前沒有的功能
  3. 下一代的 Firefox (3.5 版，預計 2009 六月推出) 才會有類似 IE8 InPrivate 隱私瀏覽的功能。(如果您使用 Firefox，目前可以先使用「清除隱私資訊」以達成類似效果。)
  4. 目前 IE 是唯一可以跑微軟自家 ActiveX 技術的瀏覽器，也就是說絕大多數的網路 ATM 轉帳只能在 IE 上使用。

不過, 其實 IE8 還有很多有利用程式開發上的應用: 像最近的這篇: 好用到掉渣的IE8 Developer Tools–JS效能調校經驗 http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/06/08/ie8-devtool-profiler.aspx , 看起來, 其實無論是程式設計人員, 美術人員, 甚至是使用者, 都應該都多方多種瀏覽器, 不過, 程式及美術, 主要都還是為了使用者, 而倒底這麼多種瀏覽器, 哪種好用, 哪種方便, 其實也是見人見智啦…

以本站右下的長期統計資訊 Histats, 的結果來看, 各瀏覽器佔比狀況如下:

看起來還是 IE6 為主耶(43.6%), 再來是 IE7(28.6%), 再來是 Fx3 (10.9%), Fx2(6.5%), 不過資料是由 2008年2月起的, 若抓近一點的話, 說不定也有一些不同. 但無論如何, 自己覺得好用, 自己覺得順手的瀏覽器, 才是好的瀏覽器啦…

分類
懶得分類

Fiddler支援Firefox了

今天同事和我說 Fiddler 已經支援 Firefox 了. 真的是太開心了!

其實 Firefox 下的 Firebug 已經能做到許多 javascript除錯(很好用的javascript除錯工具FireBug (firefox) 很好用的javascript除錯工具FireBug (firefox) ) 及 network monitoring網路 (FireBug更新功能-Network Monitoring FireBug更新功能-Network Monitoring ) 的功能了, 不過其中的 network monitoring 的部分, 若是要看 response 時, 並非是實際該次 request 的結果, 而是展開時, 再一次去 request 的結果, 如此一來, 有時要觀察的 request 對應的 response 總沒有那麼客觀(甚至不是當時的 response), 這個時候 Fiddler (Fiddler-HTTP Debugger Fiddler-HTTP Debugger )就好用多了, 因為它是截取當時的 request 及 response 的結果.

於是就進行下載 fiddler 的最新版本, 並且進行安裝, 記得要重新開啟 Firefox, 在右下角就會出現一個該 fiddler extension 的功能操作狀況, 如下:

這個代表安裝完成了 Fiddler for Firefox 的 extension 了, 其中 Fiddler: OFF 指的是 Fiddler Application 沒有開起來, 由於該 extension 不能直接發起 Fiddler Application , 所以手動從程式集裡來啟用這個 application, 該狀態就會變成 Fiddler: ON 的狀態了, 並能順利收集到 Firefox 的 request 及 response 資料囉.

其他功能其實就和原來的 fiddler 一樣囉, 不過真的很棒, 因為從網路層去 monitoring 資料會比 Firebug 來得更精準及更真實, 這個真的值得給他拍拍手, 而且 fiddler 頁面 (http://www.fiddler2.com/fiddler2/ )上也說明了, 可以支援 Internet Explorer, Mozilla Firefox, Opera, and thousands more. 真的很不錯哦, 前進了很多呢!!

接下來就可以交替使用 Firebug 及 Fiddler 囉, 而且也以看實際狀況來應用了, 看起來 Firebug 用在 web design debug (CSS), javascript 很棒, 而 Fiddler 用在 network monitoring 是很好的工具, 如何搭配使用, 看各位應用囉.

[2009/10/31 1:38補充畫面]

分類
手機大未來

Deepfish-好炫的瀏覽器

手機上的瀏覽器真的不能很炫嗎? 不能比較像 pc 的瀏覽器那樣一次看到整個版面嗎? 若希望能有更好的瀏覽經驗, 使用 windows mobile 的用戶們一定要試試這個 Deepfish, 不過這個還在實驗室 (labs.live.com) 的 Deepfish 目前不公開對外下載, 若想要測試看看的朋友可以到這裡下載: Deepfish .

接下來就看看他的特異功能了: 我們到 yahoo 首頁, 得到的畫面:

閱讀全文 “Deepfish-好炫的瀏覽器”
分類
手機大未來

手機上網方便檢視網頁的服務

用手機上網已經是在沒有電腦時常用的工具之一, 不過手機雖然也有瀏覽器, 不過在閱讀資料時, 若是網頁沒有針對手機這種設備做一些頁面的規劃及調整, 根本很難用手機檢視.

不過在用手機時最常用的 www.google.com 中也有手機版本的 ig 也就是個人化介面, 其中特別的地方是在於他在自訂的訂閱對外要連結出去其他 google 外部網站時, 會帶著一個貼心的服務, 就是特別為手機檢視時使用的 google 重新整理好的網頁內容.

簡單地說, 就是將網頁上的內容, 將大多數的 css 及圖片做整理後, 再區隔成適當的分頁, 將網頁製成適合手機瀏覽的結果, 舉個例子, 原本的一個 udn 網站上的內容: http://udn.com/NEWS/FINANCE/FIN2/4183633.shtml 透過手機來看是長這樣:

閱讀全文 “手機上網方便檢視網頁的服務”
分類
程式技術

好炫的不用javascript程式判定browser方式

一般我們在判斷 client 的 browser 時, 是利用 javascript 取得 client browser 屬性, 若是不使用 javascript 的狀況下, 如何能做到呢? 可以利用 html hack trick 方式來達成, 這篇文章
http://wafful.org/~takesako/html20hacks/browser-detect2.html
介紹了這個方式:

<img

 /''src="firefox.gif"
 /""src="sleipnir_gecko.gif"
    "src="safari.gif"
   ""src="konqueror.gif"
 /src="ie.gif"
   src="opera.gif"
   src="lynx.gif"
>

只能說真的太神奇了, 利用了 browser 的解析方式, 來判定 browser 的型態, 這篇同樣利用類似的方法達成:
http://wafful.org/~takesako/html20hacks/browser-detect.html
不過 html 碼就不是可視字元囉.
利用這種方式來判定 browser 真的很有趣.

相關文章:
http://www.hedgerwow.com/360/dhtml/html-browser-detection.html