有时候有想咨询的客户发一个手机上面的网站（有时候很多人也成为微信网站）过来给我们看，问我们能不能改其中的某个地方，结果我们马上就给了一个预览图过去；很多客户可能觉得很神奇；还有的朋友可能对这方面比较感兴趣，就过来请教：怎么在电脑上调试移动端的网站界面？

其实吧，很多天才已经为我们准备了非常实用的工具；在很久以前我们这里发布过一篇关于怎么在电脑上使用微信朋友圈的文章，文章传送《在电脑上的微信也能使用朋友圈，教你在电脑上怎么用微信朋友圈！》，里面就提到了电脑上的手机模拟器。

模拟器固然可以模拟出手机的某些状态，但对于很多不太了解这方面的人来说都是不小的操作成本，很多人就算一步步教他用模拟器也不会。那么这里针对怎么看手机网站，我们提供给大家一个最简单的方法，那就是直接用浏览器来模拟。

当然IE浏览器默认是不行的，不清楚有没有扩展插件，但我个人很少用IE，除非做兼容性测试的时候。而像谷歌浏览器（Chrome）、火狐浏览器（Firefox）等这些浏览器或者内置了或者有相应的插件。

因为我个人是钟爱谷歌浏览器的，有的朋友可能说我听都没听过这玩意，但我可以肯定告诉大家，在国内有很多人“用到”过它，因为在国内像360等浏览器用户量是很大的，而其中的极速模式其实就是Chrome，当然经过他们的一个个性化而已。

怎么用电脑浏览器看手机网站？

如果你直接用Chrome的话就不用多说了，如果你是用诸如360这样的浏览器，那么在极速模式下就ok。接下来我们按快捷键F12，调出浏览器调试工具，可以在线调试很多东西，比如HTML、CSS、JS等，那些高级应用就不用多说了，这里先告诉大家怎么用它来看手机上的网站。

其实刚才说的F12，是一个快捷，就好像我们的复制是Ctrl+C一样，如果用鼠标点击就是右键选择复制，其实在浏览器调出这个功能可以同样的，有的浏览器称之为审查元素（如Chrome），有的成为开发人员工具（如IE，个人觉得IE的这个工具一点也不好用，当然也许这是跟习惯有关）。这时候会调用我所谓的调试工具：

我相信很多不了解这方面的朋友，如果有使用快捷键的习惯，有时候可能会不小心调出这个工具出来，有的人可能不知道是什么，马上会把浏览器关闭。其实这就是调试工具，那么怎么看到手机版的网站呢。比如这里就是点击做上角的手机图标，然后就可以模拟手机版：

那么会跟手机完全一样么？

比如上图显示的是模拟的是iPhone6，其实实际上只是用到了iPhone6内置浏览器的UA属性，但至于到底这么模拟和手机上看到的效果是不是一样的？可以肯定的回答是不完全一样，但大概一样。比如iPhone就算是WEB开发也能调用IOS自己的某些UI元素，但在这里模拟是不可能实现的；但话又说回来，这样模拟手机网站的大致界面是足够的。

这样能直接调试制作手机网站界面么？

答案是肯定的，我记得在Chrome之前的版本中大概只能模拟看手机页面，而且看起来很吃力，调试起来就更吃力；但大概从去年某个版本开始就彻底改变了这种状况，比如上图就可以跟调试电脑网站一样进行调试。但需要注意的是，如果需要一个完美的效果，那么仅仅有它还是不够的，还得有其他的工具做收尾的细节处理，包括测试是不是兼容不同的平台。

通常我发现，在手机上看到的效果会比电脑上模拟的效果会更好，因为在手机上一个小小的屏幕，在单位面积上，会比电脑上更加细腻。因此在早前我们进行手机网页开发的时候，如果用到的小图标，我们会用字体图标，某些字体图标在电脑显示器上看上去并不是特别细腻，但在手机上表现特别好，比png、jpg、GIF等格式的图片表现要好得多。