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

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

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

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

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

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

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

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

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

那么會跟手機完全一樣么？

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

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

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

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