在線模擬 瀏覽器電腦技術提升篇

小編在這段時間遇到好多廣大網友的咨詢 , 今天免費分享一下關于電腦系統和電腦操作教程的知識大全 , 這篇文字是關于在線模擬 瀏覽器電腦技術提升篇的文字 , 歡迎大金仔細閱讀 , 如果不懂請多多關注我們網址陸續更新更多更全面的電腦教程 。
查了很多資料 , 嘗試了大部分方法 , 下面將這一天的努力總結下分享給大家 , 也讓大家免去看那么多文章 , 以下介紹的方法 , 都是本人親自測試成功的方法 , 測試環境winxp 。
一、Chrome*瀏覽器
chrome模擬手機總共有四種方法 , 原理都一樣 , 通過偽裝User-Agent , 將瀏覽器模擬成Android設備 。 以下標星的為推薦方法 。
1.新建Chrome快捷方式
右擊桌面上的Chrome瀏覽器圖標 , 在彈出的右鍵菜單中選擇“復制” , 復制一個圖標副本到桌面 。 右擊該副本 , 選擇“屬性” , 打開相應的對話框 , 在“目標”文本框的字符后面添加以下語句:“–user-agent=”Android”” , 如下圖:

在線模擬 瀏覽器電腦技術提升篇

文章插圖

注意user前面是兩個“-” , 并且“chrome.exe”與“–user”之間有一個空格 。 確定之后 , 打開這個新建的Chrome快捷方式 , 輸入可以瀏覽到像手機里打開一樣的頁面了 。
這時可以新建一個用戶 , 就不影響原來用戶訪問的時候也是訪問的手機版 。
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地址:
在線模擬 瀏覽器電腦技術提升篇

文章插圖

從上圖可以看到 , 還有很多類似的插件 , 其實功能都大同小異 。
4:自帶模擬器*
打開chrome開發者工具 , 按F12(r32版本) , 然后找到右上角的齒輪按鈕 , 打開設置面板 , 選擇Overrides , 勾上Show ‘Emulation’ view in console drawer(在控制臺視圖中顯示“仿真”) 。
在線模擬 瀏覽器電腦技術提升篇

文章插圖

然后關閉設置面板 , 選擇Elements面板(非Console就可以) , 找到右上角打開控制臺面板 , 選擇控制臺面板里的Emulation面板 , 右邊有很多選項 , 選擇一個點擊Emulate就可以了 , Reset按鈕能恢復到默認狀態 。
在線模擬 瀏覽器電腦技術提升篇

文章插圖

打開仿真后 , 打開 , 即可看到如下的手機下的界面
在線模擬 瀏覽器電腦技術提升篇

文章插圖

這種方法簡單好用 , 而且不需要重啟 , 推薦這種方法 。
注意:以上第一種和第二種方法都需要將全部打開的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的調試功能 。
在線模擬 瀏覽器電腦技術提升篇

文章插圖

推薦閱讀