最近公司要開發(fā)網(wǎng)站的移動(dòng)版,讓我準(zhǔn)備準(zhǔn)備知識(shí),話說本人開發(fā)移動(dòng)網(wǎng)站的經(jīng)驗(yàn)還真不多,最悲劇的事情就是我的手機(jī)是個(gè)經(jīng)典的諾基亞,而且公司還不給配手機(jī),這是有多討厭,沒辦法,沒有手機(jī)只能用電腦模擬了,相辦法代替,查了很多資料,嘗試了大部分方法,下面將這一天的努力總結(jié)下分享給大家,也讓大家免去看那么多文章,以下介紹的方法,都是本人親自測(cè)試成功的方法,測(cè)試環(huán)境winxp。
chrome模擬手機(jī)總共有四種方法,原理都一樣,通過偽裝User-Agent,將瀏覽器模擬成Android設(shè)備。以下標(biāo)星的為推薦方法。
右擊桌面上的Chrome瀏覽器圖標(biāo),在彈出的右鍵菜單中選擇“復(fù)制”,復(fù)制一個(gè)圖標(biāo)副本到桌面。右擊該副本,選擇“屬性”,打開相應(yīng)的對(duì)話框,在“目標(biāo)”文本框的字符后面添加以下語句:“–user-agent=”Android””,如下圖:
注意user前面是兩個(gè)“-”,并且“chrome.exe”與“–user”之間有一個(gè)空格。確定之后,打開這個(gè)新建的Chrome快捷方式,輸入3g.qq.com就可以瀏覽到像手機(jī)里打開一樣的頁面了。
這時(shí)可以新建一個(gè)用戶,就不影響原來用戶訪問的時(shí)候也是訪問的手機(jī)版。
開始–運(yùn)行中輸入以下命令,啟動(dòng)瀏覽器:
模擬谷歌Android:
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:
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"
這種方法僅供特殊情況下使用,因?yàn)橹貑hrome將不能恢復(fù)正常User-Agent,所以是一次性。
更多的user-agent請(qǐng)自行搜索。
插件可以很方便切換各種user-agent,很方便,但是可能會(huì)稍微影像性能。
User-Agent Selector地址:https://chrome.google.com/webstore/detail/user-agent-selector/fnbmdojpgjpmjjmnjdnbobcdhenmmgod/related
從上圖可以看到,還有很多類似的插件,其實(shí)功能都大同小異。
打開chrome開發(fā)者工具,按F12(r32版本),然后找到右上角的齒輪按鈕,打開設(shè)置面板,選擇Overrides,勾上Show ‘Emulation’ view in console drawer(在控制臺(tái)視圖中顯示“仿真”)。
然后關(guān)閉設(shè)置面板,選擇Elements面板(非Console就可以),找到右上角打開控制臺(tái)面板,選擇控制臺(tái)面板里的Emulation面板,右邊有很多選項(xiàng),選擇一個(gè)點(diǎn)擊Emulate就可以了,Reset按鈕能恢復(fù)到默認(rèn)狀態(tài)。
打開仿真后,打開http://yanhaijing.com,即可看到如下的手機(jī)下的界面
這種方法簡(jiǎn)單好用,而且不需要重啟,推薦這種方法。
注意:以上第一種和第二種方法都需要將全部打開的chrome窗口關(guān)閉,再打開才能起作用。
和chrome一樣安裝插件修改user-agent的方法
具體方法移步這里:http://blog.sina.com.cn/s/blog_645813a30100qf68.html
最近的火狐自己添加響應(yīng)式設(shè)計(jì)功能和3D試圖都很棒,打開火狐自己的控制臺(tái)(非firebug),找到右上角的響應(yīng)式設(shè)計(jì)按鈕。
打開后即切換到響應(yīng)式設(shè)計(jì)界面
但我們看到打開QQ的站點(diǎn)并未被自動(dòng)引到QQ的移動(dòng)頁面,這樣只對(duì)響應(yīng)式設(shè)計(jì)的界面起作用,對(duì)想QQ這樣云端判斷,返回不同頁面的并不適應(yīng),這里就要配合上面的方法,再改下user-agent,即可實(shí)現(xiàn)類似chrome的調(diào)試功能。
安裝完成后可打開如下界面,可用里面的瀏覽器打開網(wǎng)站即可,但這種方法打開的是電腦網(wǎng)站,而不是手機(jī)網(wǎng)站,也就是他的user-agent不是手機(jī)的,故對(duì)響應(yīng)式界面起作用,對(duì)判斷user-agent的網(wǎng)站不起作用,訪問qq,baidu等返回的都是電腦界面。
和chrome和firefox類似,可自行安裝插件,自opera12之后,opera改用webkit內(nèi)核,故可安裝chrome的插件,也可自行在opera的商店中搜索插件
User Agent Changer下載: https://addons.opera.com/zh-cn/extensions/details/user-agent-changer/?display=en
下載適合自己的版本,安裝完畢會(huì)開如下界面:
左側(cè)選擇平臺(tái),右側(cè)選擇參數(shù),選擇完畢點(diǎn)擊啟動(dòng),如下的幾面,用過手機(jī)opera的朋友會(huì)很熟悉,就是手機(jī)opera
關(guān)于opera mobile emulator的更詳細(xì)介紹參看文章末尾參考資料的相關(guān)內(nèi)容。
但此時(shí),還是只能看而已,不能調(diào)試模擬器里的網(wǎng)站,這里需要dragonfly配合以實(shí)現(xiàn)調(diào)試,由于opera12后換了內(nèi)核,不能安裝dragonfly了,所有你需要一款opera12的瀏覽器,和dragonfly的離線包,配置好后具體如何連接請(qǐng)參看這里http://www.opera.com/dragonfly/documentation/remote/
全部設(shè)置好后即可實(shí)現(xiàn)在電腦上調(diào)試手機(jī)網(wǎng)頁,如下圖所示:
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
做安卓開發(fā)的肯定都知道安卓模擬器,這是谷歌官方的提供的開發(fā)環(huán)境,能模擬安卓環(huán)境,還可切換各個(gè)版本,可下載配置好的環(huán)境,然后打開eclipes,直接打開AVDM,穿件一個(gè)AVD,然后start,如下圖:
要等一大會(huì)時(shí)間,會(huì)打開模擬器,和安卓環(huán)境一樣,打開里面的瀏覽器測(cè)試即可。但我的瀏覽器打不開不知道為什么,郁悶的很啊。
下載地址:http://developer.android.com/sdk/index.html
這也是一款模擬器,可自行搜索,本人安裝后電腦就卡死了,可能我的電腦配置不行吧,看介紹還是不錯(cuò)的。
在線只能測(cè)試界面的視覺效果,不能調(diào)試,但也是很不錯(cuò)的。
非常不錯(cuò),速度也很快,界面很簡(jiǎn)潔,支持多種平臺(tái)。
http://emulator.mobilewebsitesubmit.com/
需要java環(huán)境支持,單一平臺(tái),opera出品,速度很快。
http://www.opera.com/zh-cn/developer/opera-mini-simulator
說實(shí)話弄了半天也沒弄出來,大大的鄙視下吧,但是能測(cè)試的平臺(tái)很全面。
http://www.webpagetest.org/mobile
以上列出了多種方法,各有利弊,希望大家選擇適合自己的方法,本人推薦chrome自帶模擬器和opera mobile emulator + dragonfly的方法。因?yàn)檫@兩種方法,接近真是手機(jī)環(huán)境,又能調(diào)試css和js。
當(dāng)然文中沒有提到的還有最好的方法就是你有一臺(tái)手機(jī),那就太好了,配合遠(yuǎn)程調(diào)試,是最最理想的辦法。
*Chrome模擬手機(jī)瀏覽器(iOS/Android)的三種方法,親測(cè)無誤!:http://www.ihacksoft.com/chrome-simulate-ios-android-browse.html
用谷歌瀏覽器來當(dāng)手機(jī)模擬器:http://blog.s135.com/chrome_phone/
*關(guān)于手機(jī)網(wǎng)站測(cè)試的問題:http://segmentfault.com/q/1010000000143811
如何firefox模擬手機(jī)訪問手機(jī)網(wǎng)站:http://blog.sina.com.cn/s/blog_645813a30100qf68.html
*Firefox OS 模擬器:https://developer.mozilla.org/zh-CN/docs/Tools-840092-dup/Firefox_OS_%E6%A8%A1%E6%8B%9F%E5%99%A8
*Opera Mobile Emulator for desktop:http://dev.opera.com/articles/view/opera-mobile-emulator/
設(shè)置 Opera Dragonfly 為離線版或?qū)嶒?yàn)版的方法:http://opera.im/archives/running%EF%BC%8Ddragonfly-offline-or-experimental-version/
*整理:手機(jī)端網(wǎng)頁調(diào)試方案:http://blog.segmentfault.com/humphry/1190000000313211?page=1
*移動(dòng)終端開發(fā)必備知識(shí):http://isux.tencent.com/mobile-development-essential-knowledge.html/zh-hans
更多建議: