如何用手機測試自己寫的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

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！