如何用手机测试自己写的web页面？

现在智能手机已经达到非常普及的状态,而用户们的网页浏览习惯也慢慢都转移到了移动端上.作为web开发者的我们,移动端的开发也成为了必备技能.开发都好说,各种响应式布局一上,页面还不得服服帖帖的显示在小窗口中.那么问题来了,我们平时开发时候看的效果都是在chrome的调试模式下看的.但那毕竟是模拟器,和实际运行在手机上的效果肯定多多少少还是有些差别.有些情况下还是需要真机运行才能达到最佳效果.那么,如何才能在手机上测试自己的web页面呢?

首先,我们的手机,特别是IOS系统是没办法直接打开html文件的,而且文件从电脑上传到手机端也是比较麻烦.所以本地运行这个方案就可以pass了

那剩下的可行性方案就是在服务器上,然后通过手机浏览器访问.

这就需要具备两个必备条件

一 可用的web服务器

二 手机能访问到web服务器主机地址

假设你的电脑是笔记本电脑,而且拥有无线网卡,那就好办了.无线网卡创造了手机接入电脑当前所在的局域网的可能性,也就提供了手机访问web服务器所在地址的可能性.

我们需要下载一个wifi共享软件,即将连入电脑的有线网通过无线网卡转换成无线网,然后用手机连入wifi.这样 你的电脑和手机就在同一个局域网之下,手机就可以访问电脑所在的服务器了.那web服务器又上哪去弄呢?别给我说apache tomcat之类的,那成本太高了 ,只需要一个神器即可:

对,Hbuild!它拥有内置的服务器,而且使用特别方便,只需要吧你的页面放进去,然后点击上方浏览器运行的按钮即可开启.傻瓜式操作

别高兴的太早,我们还得记录一些东西,比如服务器的端口号,就在我们刚刚打开的浏览器地址栏中获取:

本例中端口号为 8020

当然,127.0.0.1

肯定不是主机在局域网中的网络地址 所以手机浏览器并不能通过这个地址来访问到页面.我们可以点击顶部的运行 —> 浏览器运行 —> 设置web服务器 —>内置web服务器设置—>ip地址 然后选择一个非本地的IP地址即可(不是localhost 也不是127.0.0.1)

最后用手机浏览器输入刚刚配置好的地址接上端口号即可在手机上愉快的测试自己写的web页面啦!

当然,如果你的电脑是台式机,但也无妨 只需要你有个无线路由器 只需要台式机和手机分别通过网线和wifi连入同一个路由器 同样也可以达到这个效果.小伙伴们快去试试吧!

来源：千锋HTML5