手機網頁, 網頁設計

手機網頁教學-Mobilizer手機網頁瀏覽模擬器

梅干 2011/07/20
梅問題-手機網頁-Mobilizer手機網頁瀏覽模擬器
  隨著平版、智慧型手機當紅的情況下,已改變了現代的人生活模式,根據先前的分析資料中,可見目前的手持裝置也佔了1%的瀏覽率,這也不得不重視手機瀏覽網頁的需求,先前梅干也曾分享過,利用參數改變Chrome檔頭,以及改變視窗大小的外掛元件,來模擬網頁在手機下的顯示狀況,是否有跑位或是異常等狀況,但是比較麻煩的是,一旦開啟了手機檔頭的Chrome瀏覽器,所有的視窗都會變成手機版的方式來瀏覽,有時還常會發生錯亂,為了讓環境更單純些,梅干最近發現一套MOBILIZER手機網頁的瀏覽器模擬器,可同時模擬出在iPhone、HTC、黑莓機...等,顯示狀況,相當的方便好用喔!

Mobilizer
工具名稱:Mobilizer
適用平台:Windows/Mac/Liunx
模擬裝置:iPhone、HTC EVO、Blackberry Storm、Plam Pre
官方網站:http://www.springbox.com/mobilizer/
所需套件:Adobe AIR
工具下載:

Step1
下載完畢後,雙響Mobilizer.air接著再按安裝
梅問題-手機網頁-Mobilizer手機網頁瀏覽模擬器
Step2
再按繼續就開始進行安裝。
梅問題-手機網頁-Mobilizer手機網頁瀏覽模擬器
Step3
安裝完後,在桌面就會看到Mobilizer圖示,雙響就可開啟它。
梅問題-手機網頁-Mobilizer手機網頁瀏覽模擬器
Step4
接著點一下Phones / Open / 就可選擇手機裝置。
梅問題-手機網頁-Mobilizer手機網頁瀏覽模擬器
Step5
這時就會開啟一隻超大隻的iPhone,並且網頁就會自動切換到手機版的網頁模式。
梅問題-手機網頁-Mobilizer手機網頁瀏覽模擬器
Step6
接著就可開啟其它不同的手機,就可看到在不同裝置下的顯示狀況。
梅問題-手機網頁-Mobilizer手機網頁瀏覽模擬器
Step7
來測試一下檔頭的部分,可看到iPhone與黑莓的抓出來的檔頭是相同的,但HTC抓出來的是Liunx。
梅問題-手機網頁-Mobilizer手機網頁瀏覽模擬器
Step8
如要切換網址,在上面的輸入網址,再按Enter就可切換到其它的站台,哈~可看到進到Yahoo!也會自動切換過去。(除了打網址也可直接從桌面,拖拉網頁到手機中,也可直接作切換)
梅問題-手機網頁-Mobilizer手機網頁瀏覽模擬器
Step9
再切到梅問題~~XD梅干的站沒有弄手機版本,就會回到一般的版本,看來梅干也要找時間來設計一下。
梅問題-手機網頁-Mobilizer手機網頁瀏覽模擬器
Step10
若要關閉時,直接按左邊的叉叉,就可閉關程式。
梅問題-手機網頁-Mobilizer手機網頁瀏覽模擬器
  這對於開發手機版網頁方便許多,每當作到一半想看時,直接用此模擬器就可即時預覽,最後完成再用實際手機來測試,就不用每次開發時,桌面擺滿了各式手機,像賣手機拍賣會一樣,若你也是網頁從業人員,這款模擬器可試試看喔!