有時(shí)候有想咨詢的客戶發(fā)一個(gè)手機(jī)上面的網(wǎng)站（有時(shí)候很多人也成為微信網(wǎng)站）過來(lái)給我們看，問我們能不能改其中的某個(gè)地方，結(jié)果我們馬上就給了一個(gè)預(yù)覽圖過去；很多客戶可能覺得很神奇；還有的朋友可能對(duì)這方面比較感興趣，就過來(lái)請(qǐng)教：怎么在電腦上調(diào)試移動(dòng)端的網(wǎng)站界面？

其實(shí)吧，很多天才已經(jīng)為我們準(zhǔn)備了非常實(shí)用的工具；在很久以前我們這里發(fā)布過一篇關(guān)于怎么在電腦上使用微信朋友圈的文章，文章傳送《在電腦上的微信也能使用朋友圈，教你在電腦上怎么用微信朋友圈！》，里面就提到了電腦上的手機(jī)模擬器。

模擬器固然可以模擬出手機(jī)的某些狀態(tài)，但對(duì)于很多不太了解這方面的人來(lái)說(shuō)都是不小的操作成本，很多人就算一步步教他用模擬器也不會(huì)。那么這里針對(duì)怎么看手機(jī)網(wǎng)站，我們提供給大家一個(gè)最簡(jiǎn)單的方法，那就是直接用瀏覽器來(lái)模擬。

當(dāng)然IE瀏覽器默認(rèn)是不行的，不清楚有沒有擴(kuò)展插件，但我個(gè)人很少用IE，除非做兼容性測(cè)試的時(shí)候。而像谷歌瀏覽器（Chrome）、火狐瀏覽器（Firefox）等這些瀏覽器或者內(nèi)置了或者有相應(yīng)的插件。

因?yàn)槲覀€(gè)人是鐘愛谷歌瀏覽器的，有的朋友可能說(shuō)我聽都沒聽過這玩意，但我可以肯定告訴大家，在國(guó)內(nèi)有很多人“用到”過它，因?yàn)樵趪?guó)內(nèi)像360等瀏覽器用戶量是很大的，而其中的極速模式其實(shí)就是Chrome，當(dāng)然經(jīng)過他們的一個(gè)個(gè)性化而已。

怎么用電腦瀏覽器看手機(jī)網(wǎng)站？

如果你直接用Chrome的話就不用多說(shuō)了，如果你是用諸如360這樣的瀏覽器，那么在極速模式下就ok。接下來(lái)我們按快捷鍵F12，調(diào)出瀏覽器調(diào)試工具，可以在線調(diào)試很多東西，比如HTML、CSS、JS等，那些高級(jí)應(yīng)用就不用多說(shuō)了，這里先告訴大家怎么用它來(lái)看手機(jī)上的網(wǎng)站。

其實(shí)剛才說(shuō)的F12，是一個(gè)快捷，就好像我們的復(fù)制是Ctrl+C一樣，如果用鼠標(biāo)點(diǎn)擊就是右鍵選擇復(fù)制，其實(shí)在瀏覽器調(diào)出這個(gè)功能可以同樣的，有的瀏覽器稱之為審查元素（如Chrome），有的成為開發(fā)人員工具（如IE，個(gè)人覺得IE的這個(gè)工具一點(diǎn)也不好用，當(dāng)然也許這是跟習(xí)慣有關(guān)）。這時(shí)候會(huì)調(diào)用我所謂的調(diào)試工具：

我相信很多不了解這方面的朋友，如果有使用快捷鍵的習(xí)慣，有時(shí)候可能會(huì)不小心調(diào)出這個(gè)工具出來(lái)，有的人可能不知道是什么，馬上會(huì)把瀏覽器關(guān)閉。其實(shí)這就是調(diào)試工具，那么怎么看到手機(jī)版的網(wǎng)站呢。比如這里就是點(diǎn)擊做上角的手機(jī)圖標(biāo)，然后就可以模擬手機(jī)版：

那么會(huì)跟手機(jī)完全一樣么？

比如上圖顯示的是模擬的是iPhone6，其實(shí)實(shí)際上只是用到了iPhone6內(nèi)置瀏覽器的UA屬性，但至于到底這么模擬和手機(jī)上看到的效果是不是一樣的？可以肯定的回答是不完全一樣，但大概一樣。比如iPhone就算是WEB開發(fā)也能調(diào)用IOS自己的某些UI元素，但在這里模擬是不可能實(shí)現(xiàn)的；但話又說(shuō)回來(lái)，這樣模擬手機(jī)網(wǎng)站的大致界面是足夠的。

這樣能直接調(diào)試制作手機(jī)網(wǎng)站界面么？

答案是肯定的，我記得在Chrome之前的版本中大概只能模擬看手機(jī)頁(yè)面，而且看起來(lái)很吃力，調(diào)試起來(lái)就更吃力；但大概從去年某個(gè)版本開始就徹底改變了這種狀況，比如上圖就可以跟調(diào)試電腦網(wǎng)站一樣進(jìn)行調(diào)試。但需要注意的是，如果需要一個(gè)完美的效果，那么僅僅有它還是不夠的，還得有其他的工具做收尾的細(xì)節(jié)處理，包括測(cè)試是不是兼容不同的平臺(tái)。

通常我發(fā)現(xiàn)，在手機(jī)上看到的效果會(huì)比電腦上模擬的效果會(huì)更好，因?yàn)樵谑謾C(jī)上一個(gè)小小的屏幕，在單位面積上，會(huì)比電腦上更加細(xì)膩。因此在早前我們進(jìn)行手機(jī)網(wǎng)頁(yè)開發(fā)的時(shí)候，如果用到的小圖標(biāo)，我們會(huì)用字體圖標(biāo)，某些字體圖標(biāo)在電腦顯示器上看上去并不是特別細(xì)膩，但在手機(jī)上表現(xiàn)特別好，比png、jpg、GIF等格式的圖片表現(xiàn)要好得多。