亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 學院 > 編程設計 > 正文

在PC上測試移動端網站和模擬手機瀏覽器的5大方法

2020-06-27 15:23:06
字體:
來源:轉載
供稿:網友

查了很多資料,嘗試了大部分方法,下面將這一天的努力總結下分享給大家,也讓大家免去看那么多文章,以下介紹的方法,都是本人親自測試成功的方法,測試環境winxp。

一、Chrome*瀏覽器

chrome模擬手機總共有四種方法,原理都一樣,通過偽裝User-Agent,將瀏覽器模擬成Android設備。以下標星的為推薦方法。

1.新建Chrome快捷方式

右擊桌面上的Chrome瀏覽器圖標,在彈出的右鍵菜單中選擇“復制”,復制一個圖標副本到桌面。右擊該副本,選擇“屬性”,打開相應的對話框,在“目標”文本框的字符后面添加以下語句:“–user-agent=”Android””,如下圖:

電腦模擬手機瀏覽器,在線模擬手機瀏覽器,谷歌瀏覽器模擬手機

注意user前面是兩個“-”,并且“chrome.exe”與“–user”之間有一個空格。確定之后,打開這個新建的Chrome快捷方式,輸入3g.qq.com就可以瀏覽到像手機里打開一樣的頁面了。

這時可以新建一個用戶,就不影響原來用戶訪問的時候也是訪問的手機版。

2.一次性模擬iPhone和安卓手機

開始–運行中輸入以下命令,啟動瀏覽器:

模擬谷歌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"

這種方法僅供特殊情況下使用,因為重啟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版本),然后找到右上角的齒輪按鈕,打開設置面板,選擇Overrides,勾上Show ‘Emulation’ view in console drawer(在控制臺視圖中顯示“仿真”)。

電腦模擬手機瀏覽器,在線模擬手機瀏覽器,谷歌瀏覽器模擬手機

然后關閉設置面板,選擇Elements面板(非Console就可以),找到右上角打開控制臺面板,選擇控制臺面板里的Emulation面板,右邊有很多選項,選擇一個點擊Emulate就可以了,Reset按鈕能恢復到默認狀態。

電腦模擬手機瀏覽器,在線模擬手機瀏覽器,谷歌瀏覽器模擬手機

打開仿真后,打開http://xw.qq.com,即可看到如下的手機下的界面

電腦模擬手機瀏覽器,在線模擬手機瀏覽器,谷歌瀏覽器模擬手機

這種方法簡單好用,而且不需要重啟,推薦這種方法。

注意:以上第一種和第二種方法都需要將全部打開的chrome窗口關閉,再打開才能起作用。

二、Firefox*瀏覽器

1.修改user-agent

和chrome一樣安裝插件修改user-agent的方法,搜索wmlbrowser、XHTML Mobile Profile以及User Agent Switcher三個插件

2.火狐響應式設計+修改user-agent*

最近的火狐自己添加響應式設計功能和3D試圖都很棒,打開火狐自己的控制臺(非firebug),找到右上角的響應式設計按鈕。

電腦模擬手機瀏覽器,在線模擬手機瀏覽器,谷歌瀏覽器模擬手機

打開后即切換到響應式設計界面

電腦模擬手機瀏覽器,在線模擬手機瀏覽器,谷歌瀏覽器模擬手機

但我們看到打開QQ的站點并未被自動引到QQ的移動頁面,這樣只對響應式設計的界面起作用,對想QQ這樣云端判斷,返回不同頁面的并不適應,這里就要配合上面的方法,再改下user-agent,即可實現類似chrome的調試功能。

電腦模擬手機瀏覽器,在線模擬手機瀏覽器,谷歌瀏覽器模擬手機

3.Firefox OS 模擬器

安裝的方法 參考這里:https://developer.mozilla.org/zh-CN/docs/Tools-840092-dup/Firefox_OS_%E6%A8%A1%E6%8B%9F%E5%99%A8#Installing

安裝完成后可打開如下界面,可用里面的瀏覽器打開網站即可,但這種方法打開的是電腦網站,而不是手機網站,也就是他的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/

全部設置好后即可實現在電腦上調試手機網頁,如下圖所示:

電腦模擬手機瀏覽器,在線模擬手機瀏覽器,谷歌瀏覽器模擬手機

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。

當然文中沒有提到的還有最好的方法就是你有一臺手機,那就太好了,配合遠程調試,是最最理想的辦法。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
国产精品日韩在线一区| 2019最新中文字幕| 97久久精品在线| 日韩在线观看免费高清| 2019中文字幕在线免费观看| 午夜伦理精品一区| 日韩欧美国产中文字幕| 最近日韩中文字幕中文| 亚洲综合一区二区不卡| 欧美日韩国产一区在线| 日韩精品视频在线免费观看| 日本人成精品视频在线| 中文字幕亚洲欧美一区二区三区| 欧美国产日韩在线| 日韩成人在线播放| 视频一区视频二区国产精品| 91香蕉电影院| 久久亚洲精品网站| 97免费在线视频| 久久韩剧网电视剧| 久久久黄色av| 久久久97精品| 97av在线播放| 欧美肥臀大乳一区二区免费视频| 韩剧1988在线观看免费完整版| 久久夜色精品国产亚洲aⅴ| 一区二区三欧美| 亚洲夜晚福利在线观看| 欧美激情成人在线视频| 亚洲综合视频1区| 欧美一级高清免费| 欧美激情久久久久| 日韩精品极品毛片系列视频| 欧美与黑人午夜性猛交久久久| 亚洲自拍小视频| 国产精品国内视频| 日本成人在线视频网址| 成人免费xxxxx在线观看| 超薄丝袜一区二区| 日韩美女av在线| 国产精品成人av性教育| 精品视频久久久久久久| 欧洲永久精品大片ww免费漫画| 国产日韩精品综合网站| 国产亚洲欧洲黄色| 九九久久久久久久久激情| 91chinesevideo永久地址| 夜夜躁日日躁狠狠久久88av| 成人羞羞国产免费| 97在线视频精品| 亚州成人av在线| 精品精品国产国产自在线| 久久69精品久久久久久国产越南| 中文字幕亚洲欧美日韩2019| 亚洲精品视频在线观看视频| 91精品久久久久| 久久久成人精品| 欧美视频13p| 日韩精品中文字幕在线观看| 日韩网站在线观看| 亚洲成人动漫在线播放| 亚洲天堂久久av| 91色琪琪电影亚洲精品久久| 国产欧美日韩免费看aⅴ视频| 在线不卡国产精品| 久久精品一本久久99精品| 国产丝袜一区二区| 国内精品模特av私拍在线观看| 亚洲精品电影网站| 91精品免费久久久久久久久| 亚洲va国产va天堂va久久| 国产精品久久久av| 日韩在线观看网址| 欧美黄色小视频| 欧美日在线观看| 亚洲人成在线一二| 欧美大片在线影院| 欧美日韩成人网| 欧美性猛交xxx| 永久免费毛片在线播放不卡| 亚洲最大av网站| 欧美做受高潮电影o| 欧美亚洲第一区| 成人福利视频在线观看| 久久99国产精品久久久久久久久| 国产精品久久97| 91av网站在线播放| 欧美久久精品午夜青青大伊人| 青青在线视频一区二区三区| 97超级碰碰碰| 色综合天天综合网国产成人网| 91中文字幕在线| 欧美日韩激情美女| 亚洲一区二区黄| 日韩欧美有码在线| 亚洲白拍色综合图区| 亚洲欧洲在线免费| 精品毛片三在线观看| 国产精品视频26uuu| 国产精品久久久久久av| 国产精品99久久久久久人| 国产日韩欧美电影在线观看| 国产日韩欧美在线播放| 国产精品视频免费观看www| 久久成人综合视频| 国产精品极品美女在线观看免费| 成人乱人伦精品视频在线观看| 亚洲欧美在线免费观看| 亚洲欧美日韩国产中文| 国产成人一区二区| 欧美日韩一区二区免费视频| 成人黄色片在线| 国产精品va在线播放| 欧美激情伊人电影| 色悠久久久久综合先锋影音下载| 成人国产精品av| 国产精品久久久久久久9999| 日本午夜在线亚洲.国产| 91亚洲精品一区二区| 国产成人亚洲精品| 午夜精品福利视频| 国内精久久久久久久久久人| 国产精品久久激情| 亚洲影院色无极综合| 国产精品大片wwwwww| 亚洲japanese制服美女| 国产精品揄拍500视频| 综合网日日天干夜夜久久| 国产精品午夜一区二区欲梦| 久久久久久久999| 国产精品久久久久久中文字| 91亚洲va在线va天堂va国| 亚洲国产私拍精品国模在线观看| 亚洲一区二区三区毛片| 欧美大片大片在线播放| 成人免费观看49www在线观看| 精品亚洲国产视频| 91大神福利视频在线| 欧美性xxxx极品hd欧美风情| 精品亚洲aⅴ在线观看| 亚洲欧美制服丝袜| 97人人爽人人喊人人模波多| 97超级碰在线看视频免费在线看| 久久97久久97精品免视看| 亚洲自拍中文字幕| 欧美日韩免费在线| 日本成人精品在线| 国产欧美精品一区二区三区-老狼| 亚洲成色www8888| 亚洲字幕在线观看| 51ⅴ精品国产91久久久久久| 亚洲图片欧洲图片av| 欧美放荡办公室videos4k| 午夜精品久久久久久99热软件| 国产在线视频2019最新视频| 亚洲国产精彩中文乱码av在线播放| 中文字幕在线看视频国产欧美| 国产日产欧美精品| 91色p视频在线| 日本精品视频网站| 97在线精品国自产拍中文| 欧美大学生性色视频| 伊人精品在线观看| 中文字幕国产精品久久|