最近公司要開發網站的移動版,讓我準備準備知識,話說本人開發移動網站的經驗還真不多,最悲劇的事情就是我的手機是個經典的諾基亞,而且公司還不給配手機,這是有多扣啊,沒辦煩啦,沒有手機就用電腦模擬唄,相辦法代替,查了很多資料,嘗試了大部分方法,下面將這一天的努力總結下分享給大家,也讓大家免去看那麼多文章,一下介紹的方法,都是本人親自測試成功的方法。
Chrome*
chrome模擬手機總共有四種方法,原理都一樣,通過僞裝User-Agent,將瀏覽器模擬成Android設備。以下標星的爲推薦方法。
1.新建Chrome快捷方式
右擊桌面上的Chrome瀏覽器圖標,在彈出的右鍵菜單中選擇“複製”,複製一個圖標副本到桌面。右擊該副本,選擇“屬性”,打開相應的對話框,在“目標”文本框的字符後面添加以下語句:“–user-agent=”Android””,如下圖:
注意user前面是兩個“-”,並且“chrome.exe”與“–user”之間有一個空格。確定之後,打開這個新建的Chrome快捷方式,輸入3g.qq.com就可以瀏覽到像手機裏打開一樣的頁面了。
2.一次性模擬iPhone和安卓手機
開始–運行中輸入以下命令,啓動瀏覽器:
模擬谷歌Android:
1
|
chrome.exe
--user-agent= "Mozilla/5.0
(Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1" |
模擬蘋果iPhone:
1
|
chrome.exe
--user-agent= "Mozilla/5.0
(iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10" |
這種方法僅供特殊情況下使用,因爲重啓Chrome將不能恢復正常User-Agent,所以是一次性。
更多的user-agent請自行搜索。
3.安裝插件
插件可以很方便切換各種user-agent,很方便,但是可能會稍微影像性能。
User-Agent Selector地址:https://chrome.google.com/webstore/detail/user-agent-selector/fnbmdojpgjpmjjmnjdnbobcdhenmmgod/related
從上圖可以看到,還有很多類似的插件,其實功能都大同小異。
4:自帶模擬器*
打開chrome開發者工具,按F12(r32版本)1,然後找到右上角的齒輪按鈕,打開設置面板,選擇Overrides,勾上Show ‘Emulation’ view in console drawer(在控制檯視圖中顯示“仿真”)。
然後關閉設置面板,選擇Elements面板(非Console就可以),找到右上角打開控制檯面板,選擇控制檯面板裏的Emulation面板,右邊有很多選項,選擇一個點擊Emulate就可以了,Reset按鈕能恢復到默認狀態。
打開仿真後,打開http://yanhaijing.com,即可看到如下的手機下的界面
這種方法簡單好用,而且不需要重啓,推薦這種方法。
注意:以上第一種和第二種方法都需要將全部打開的chrome窗口關閉,再打開才能起作用。
Firefox
1.修改user-agent
和chrome一樣安裝插件修改user-agent的方法
具體方法移步這裏:http://blog.sina.com.cn/s/blog_645813a30100qf68.html
2.火狐響應式設計+修改user-agent
最近的火狐自己添加響應式設計功能和3D試圖都很棒,打開火狐自己的控制檯(非firebug),找到右上角的響應式設計按鈕。
打開後即切換到響應式設計界面
但我們看到打開QQ的站點並未被自動引到QQ的移動頁面,這樣只對響應式設計的界面起作用,對想QQ這樣雲端判斷,返回不同頁面的並不適應,這裏就要配合上面的方法,再改下user-agent,即可實現類似chrome的調試功能。
3.Firefox OS 模擬器
安裝完成後可打開如下界面,可用裏面的瀏覽器打開網站即可,但這種方法打開的是電腦網站,而不是手機網站,也就是他的user-agent不是手機的,故對響應式界面起作用,對判斷user-agent的網站不起作用,訪問qq,baidu等返回的都是電腦界面。
Opera*
1.修改user-agent
和chrome和firefox類似,可自行安裝插件,自opera12之後,opera改用webkit內核,故可安裝chrome的插件,也可自行在opera的商店中搜索插件
User Agent Changer下載: https://addons.opera.com/zh-cn/extensions/details/user-agent-changer/?display=en
2.Opera Mobile Emulator + dragonfly*
下載適合自己的版本,安裝完畢會開如下界面:
左側選擇平臺,右側選擇參數,選擇完畢點擊啓動,如下的幾面,用過手機opera的朋友會很熟悉,就是手機opera
關於opera mobile emulator的更詳細介紹參看文章末尾參考資料的相關內容。
但此時,還是隻能看而已,不能調試模擬器裏的網站,這裏需要dragonfly配合以實現調試,由於opera12後換了內核,不能安裝dragonfly了,所有你需要一款opera12的瀏覽器,和dragonfly的離線包,配置好後具體如何連接請參看這裏http://www.opera.com/dragonfly/documentation/remote/
全部設置好後即可實現在電腦上調試手機網頁,如下圖所示:
opera12下載地址:http://yanhaijing.7958.com/down_10918696.html
dragonfly中文離線包下載地址:http://yanhaijing.7958.com/down_10918700.html
opera mobile emulator下載地址:http://www.opera.com/zh-cn/developer/mobile-emulator
模擬器*
1.官方模擬器*
做安卓開發的肯定都知道安卓模擬器,這是谷歌官方的提供的開發環境,能模擬安卓環境,還可切換各個版本,可下載配置好的環境,然後打開eclipes,直接打開AVDM,穿件一個AVD,然後start,如下圖:
要等一大會時間,會打開模擬器,和安卓環境一樣,打開裏面的瀏覽器測試即可。但我的瀏覽器打不開不知道爲什麼,鬱悶的很啊。
下載地址:http://developer.android.com/sdk/index.html
2.bluestacks
這也是一款模擬器,可自行搜索,本人安裝後電腦就卡死了,可能我的電腦配置不行吧,看介紹還是不錯的。
在線測試
在線只能測試界面的視覺效果,不能調試,但也是很不錯的。
1.Mobile Emulator*
非常不錯,速度也很快,界面很簡潔,支持多種平臺。
http://emulator.mobilewebsitesubmit.com/
2.opera mini simulator
需要java環境支持,單一平臺,opera出品,速度很快。
http://www.opera.com/zh-cn/developer/opera-mini-simulator
3.webpage mobile
說實話弄了半天也沒弄出來,大大的鄙視下吧,但是能測試的平臺很全面。
http://www.webpagetest.org/mobile
總結
以上列出了多種方法,各有利弊,希望大家選擇適合自己的方法,本人推薦chrome自帶模擬器和opera mobile emulator + dragonfly的方法。因爲這兩種方法,接近真是手機環境,又能調試css和js。
當然文中沒有提到的還有最好的方法就是你有一臺手機,那就太好了,配合遠程調試,是最最理想的辦法。
----------------------------------------------------
文章來源:http://blog.jobbole.com/60176/