|
在控制臺(tái)-機(jī)型-點(diǎn)擊小三角-選擇edit 有更多機(jī)型可以選擇
選擇具體的機(jī)型之后，dpr是不能更改的。選擇responsive可以更改機(jī)型 如果沒(méi)有看到dpr就去右邊小點(diǎn)點(diǎn)那里找到并打開
真機(jī)調(diào)試： 瀏覽器上的調(diào)試工具只是模擬行為，最后還是需要在真機(jī)上查看測(cè)試 可以用一些集成環(huán)境搭建服務(wù)器，然后上傳代碼測(cè)試查看，推薦 phpstudy 把項(xiàng)目放在www目錄下，使用localhost訪問(wèn)：http://localhost/demoo/
如果想要手機(jī)也訪問(wèn)到這個(gè)頁(yè)面，就需要保證手機(jī)和電腦在同一個(gè)網(wǎng)絡(luò)中，通常用一個(gè)路由器即可做到 windows打開cmd，ipconfig查看ip地址
選中ip地址，鼠標(biāo)右鍵即可復(fù)制，然后替換掉網(wǎng)址欄里的localhost ： http://192.168.10.146/demoo/
在手機(jī)上通過(guò)輸入：http://192.168.10.146/demoo/ 即可訪問(wèn) 嫌麻煩的話也可以使用草料二維碼將網(wǎng)址轉(zhuǎn)二維碼，然后掃碼訪問(wèn)
常見(jiàn)真機(jī)調(diào)試才能測(cè)試出的問(wèn)題： 如，點(diǎn)擊回到頂部按鈕，在真機(jī)失效 <script>
var backtopEl = document.getElementById('backtop');
backtopEl.addEventListener('click', function () {
document.documentElement.scrollTop = 0;
// document.body.scrollTop = 0;
}, false);
</script>
這段代碼在部分設(shè)備可能會(huì)失效，因?yàn)橛行g覽器無(wú)法識(shí)別 document.documentElement 解決方法是添加一句： document.body.scrollTop=0;
遠(yuǎn)程調(diào)試工具 Vorlon.js 有時(shí)在pc端可以使用console.log來(lái)調(diào)試，但是在移動(dòng)端沒(méi)有控制臺(tái)，沒(méi)法這么干 移動(dòng)端只有alert可以調(diào)試，但是不太方便 如果想要在手機(jī)端操作，并能在電腦端查看打印出來(lái)的結(jié)果，就需要這個(gè)遠(yuǎn)程調(diào)試工具
Vorlon.js依賴于node.js 安裝好最新穩(wěn)定版的node.js，然后打開cmd，輸入node -v，如果打印出版本代表node.js安裝成功
根據(jù)Vorlon.js官網(wǎng)，安裝可以使用：npm i -g vorlon 但是npm是國(guó)外鏡像，速度非常慢，建議使用國(guó)內(nèi)的淘寶鏡像cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 然后使用淘寶鏡像安裝vorlon cnpm i -g vorlon 輸入vorlon
像我這樣的代表安裝成功哈 在瀏覽器輸入：localhost:1337即可訪問(wèn)
把下面這句話加入要用vorlon訪問(wèn)的頁(yè)面 <script src="http://localhost:1337/vorlon.js"></script>
電腦端訪問(wèn)：http://192.168.10.146/demoo/ 然后在手機(jī)上也訪問(wèn)這個(gè)網(wǎng)址（注意是同一個(gè)局域網(wǎng)下），在vorlon客戶端會(huì)顯示已經(jīng)連接的設(shè)備
-0代表電腦調(diào)試模擬，-1是真機(jī)調(diào)試的 選擇-1真機(jī)調(diào)試的設(shè)備，在真機(jī)進(jìn)行操作時(shí)，可以在vorlon客戶端查看console的結(jié)果（如果你有寫相關(guān)調(diào)試代碼的話）
多終端同步工具 Browsersync https://www./ 首先安裝 cnpm install -g browser-sync 安裝完成之后進(jìn)入項(xiàng)目目錄，在空白處按住shift+鼠標(biāo)右鍵，選擇：在此處打開命令窗口
這樣可以保證打開的目錄是位于項(xiàng)目目錄 然后開啟一個(gè)自帶服務(wù)器，監(jiān)測(cè)所有文件的變化： browser-sync start --server --files="*"
然后默認(rèn)瀏覽器會(huì)自動(dòng)打開項(xiàng)目文件
http://localhost:3000 是項(xiàng)目打開頁(yè)面， http://localhost:3001是調(diào)試頁(yè)面（360瀏覽器自動(dòng)翻譯網(wǎng)頁(yè)了）
在cmd中使用ipconfig查看ip地址，然后把localhost換成ip地址，在同一局域網(wǎng)下，用移動(dòng)設(shè)備來(lái)訪問(wèn)網(wǎng)址： 可以使用草料二維碼生成二維碼，微信掃碼打開
能夠?qū)崿F(xiàn)的效果是：當(dāng)你在瀏覽器上操作的時(shí)候（比如上下滑動(dòng)試試），手機(jī)上也會(huì)有同步的操作；反過(guò)來(lái)也是?。?！感覺(jué)好給力！?。?/p> 當(dāng)修改完文件之后，電腦上會(huì)自動(dòng)監(jiān)測(cè)文件變化，修改樣式；不過(guò)手機(jī)端我測(cè)試了下沒(méi)有實(shí)時(shí)生效，估計(jì)是因?yàn)榫彺姘?/p>
終端檢測(cè)：檢測(cè)訪問(wèn)網(wǎng)站的終端是PC還是移動(dòng)設(shè)備 為什么要終端檢測(cè)： 頁(yè)面跳轉(zhuǎn) 加載相應(yīng)資源（比如手機(jī)端更適合zepto，pc端更適合jQuery）
打印navigator.userAgent（我用的谷歌瀏覽器） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>終端檢測(cè)</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> </head> <body> <script> console.log(navigator.userAgent); </script> </body> </html>
終端檢測(cè)可以在后端完成，也可以在前端完成（建議后端來(lái)完成，效率更高） 終端檢測(cè)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>終端檢測(cè)</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> </head> <body> <script> //console.log(navigator.userAgent); var isMobile=navigator.userAgent.match(/android|iphone|ipad|ipod/i); if(isMobile){ location.href="m.域名.com"; }else{ location.href="域名.com"; } </script> </body> </html>
終端檢測(cè)實(shí)現(xiàn)資源加載 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>終端檢測(cè)</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> </head> <body> <script> //console.log(navigator.userAgent); var isMobile=navigator.userAgent.match(/android|iphone|ipad|ipod/i); if(isMobile){ // location.href="m.域名.com"; //zepto }else{ //location.href="域名.com"; //jQuery } </script> </body> </html>
|
|
|
