WEB移動端開發中,區域網內手機瀏覽器訪問電腦頁面,實時檢視程式碼除錯結果
痛點:在進行移動端頁面開發時,經常需要用手機檢視開發的頁面效果。雖然瀏覽器自帶模擬器,但是各個手機相容問題除錯以及操作效果除錯還是需要上真機。
解決途徑:
1、將程式碼扔到伺服器,通過連線伺服器訪問頁面除錯
2、採用內網穿透,將自己的電腦當成伺服器主機,手機訪問電腦伺服器。之前我用過NATAPP,價格也還合理。
3、最簡單的,最直接的,手機和電腦都連在一個區域網,apache伺服器在http-vhosts.conf中配置虛擬主機為允許所有使用者訪問,即可。可以看一下配置如下:
途中Deny,Allow,Require是什麼含義,可以看一下這篇文章Apache中httpd-vhosts.conf虛擬主機設定,Allow,Deny,Require含義
最後,記住,這個虛擬主機必須放在最前面
訪問方式:cmd中輸入ifconfig,檢視ipv4地址,在手機瀏覽器輸入該地址。
相關推薦
WEB移動端開發中,區域網內手機瀏覽器訪問電腦頁面,實時檢視程式碼除錯結果
痛點:在進行移動端頁面開發時,經常需要用手機檢視開發的頁面效果。雖然瀏覽器自帶模擬器,但是各個手機相容問題除錯以及操作效果除錯還是需要上真機。 解決途徑: 1、將程式碼扔到伺服器,通過連線伺服器訪問頁面除錯 2、採用內網穿透,將自己的電腦當成伺服器主機,手機訪問電腦伺服器。之前我用過NA
在移動端開發中,容易遇到的問題集合。
1、禁止IOS,Android長按下載圖片 .css { -webkit-touch-callout : none; } 2、禁止IOS,Android使用者選中文字 .cs
關於移動端開發時iOS上滑屏卡頓的問題,以及電話類數字的樣式失控問題
img 頁面 通話 tips rem span cti 解法 並不是 寫在前面的話: tips:寫移動的時候,那些頭部需要固定顯示在顯示屏頂部的,通常在PC端我會用fixed來寫。但是,在移動端,這並不是一個好方法,因為彈出輸入小鍵盤的時候,會造成fixed 的元素偏移
移動端開發中模擬手機測試小技巧
小技巧 erl windows ati 頁面效果 cal ora 分享 地址 情景:在開發移動端情況下,pc看到的效果有時於真實手機裏看到的效果可以不大一樣,將代碼發送到服務器再去測試又太麻煩, 這時,下面的小技巧可能就比較有用了,前提需要 pc跟手機一部,並且
web移動端開發技巧與注意事項彙總
一、meta的使用 1、<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-sca
關於移動端開發中遇到的坑
1 滾動穿透問題 滾動穿透是指在移動端當有 fixed 遮罩背景和彈出層時,在螢幕上滑動能夠滑動背景下面的內容。網上整理了解決方案,但有些還是存在一定的問題: 1.1 設定overflow為hidden .modal-open { &, body {
Win7下搭建WEB伺服器,區域網內其它機器訪問不到
在Win7下搭建的Apache或IISWEB伺服器,由於系統自身的安全性,區域網內的其它機器訪問不到,解決辦法如下: 原因:本地的埠號沒有對外開放 操作步驟如下: 1、開啟控制面板,找到Windows防火牆,單擊左側的高階設定。 2
web移動端開發-將網站分享朋友圈、微信空間、朋友圈功能
我們知道現在我們無法直接通過js直接跳轉到微信和QQ等軟體進行分享,但是現在像UC瀏覽器和QQ瀏覽器這樣的主流瀏覽器自帶一個分享工具,而他們也有自己定義的js介面.我們通過呼叫瀏覽器的介面去呼叫瀏覽器的分享,從而實現原生分享功能.是不是很酷呢? 工具介紹: nativ
web移動端開發技巧
med 兼容 detect con capi 溢出 鍵盤 lam 右滑 一、meta的使用 1、<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.
web移動端開發技巧與bc平臺搭建註意事項
for ini 頁面 並且 tap 開發技巧 maximum 放大 zoom 一、meta的使用bc平臺搭建【企鵝21717-93408】1、<meta name="viewport" content="width=device-widt
web專案中實現登陸成功後才能訪問某些頁面,否則自動跳轉到登陸介面,以及對無限迴圈重定向的解決
1、不使用過濾器實現,在需要攔截的頁面通過session判斷是否登陸,若沒登陸則跳轉到login.jsp頁面: <% Admin admin = (Admin)session.ge
手機瀏覽器訪問PC網站,跳轉到wap手機版網站
//此段程式碼放入script標籤中,手機瀏覽器訪問PC網頁跳轉到wap function is_mobile() { var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|doc
在webstorm中配置本地伺服器-區域網內其他裝置訪問(移動端手機訪問測試等)
前言:我在網上找了很多教程,都寫得不夠全面,於是我親自經過多次試驗,試驗出來了,現在分享給大家,另外我用的版本是webstorm 2018.1.5,我們一起看下面的配置一流程: 1.首先需要配置你的埠號並允許服務被外部訪問 操作順序: ① 點選左上角“ file(檔案)”
web移動端和PC端利用chrome同步開發調試
orm 暫時 ng-click flow fill idt style ini nts web移動端和PC端利用chrome同步開發調試
Web前端攻城獅培養計劃之jQuery深入移動端開發
Web前端攻城獅培養計劃之jQuery深入移動端開發 適合人群 如果你已經掌握HTML5、CSS3、JavaScript、jQuery等基礎知識,那麼本課程絕對是你的不二之選。 如果你沒有基礎但熱愛前端,並希望在前端應用方面不斷取得成績,可以先從《HTML5與CSS3實現動態網頁》和《HTML5
移動端開發和web前端開發的區別?
如果說非要有區別的話應該就是開發的軟體和方式不同,因為他們本來就不屬於一端的東西,具體來看看下面: web前端開發 用最簡單粗暴的方式來講,就是用html + css + javascript來構建一個供人瀏覽的網頁,其中又包括兩個主要的分類:p
移動端開發過程中需要注意的問題
1、防止手機中網頁放大和縮小,這點是最基本的,最為手機網站開發者來說應該都知道的,就是設定meta中的viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, max
關於移動端開發寬度高度,字型以及rem寬度使用的總結
遇到的問題:如何適配不同的手機螢幕。 簡單的說media query可以解決一部分。但是media query目前是照著iphone5/iphone/iphone6s 三個不同尺寸來進行。 如果手機尺寸不在這三個範圍之內,那麼元素的寬度可以按
移動端開發時,讓字型小於12px的方法
今天我們來說下在移動端開發時如何讓字型小於12px。 之前寫過一篇部落格,介紹如何讓chrome的字型小於12px,戳這裡檢視。在改變chrome字型的時候,在各路大神那裡看到過這個方法: html{
js 實現在移動端開發,解決不同手機畫素大小的相容問題
Js 實現在移動開發網頁時,根據手機畫素不同,自動改變相對,字型的大小。 例項程式碼中以750畫素為參考,如果在350畫素手機上顯示該內容,相對字型大小為1px=0.01rem (funct