|
在控制臺(tái)-機(jī)型-點(diǎn)擊小三角-選擇edit 有更多機(jī)型可以選擇
選擇具體的機(jī)型之后，dpr是不能更改的。選擇responsive可以更改機(jī)型 如果沒有看到dpr就去右邊小點(diǎn)點(diǎn)那里找到并打開
真機(jī)調(diào)試： 瀏覽器上的調(diào)試工具只是模擬行為，最后還是需要在真機(jī)上查看測試 可以用一些集成環(huán)境搭建服務(wù)器，然后上傳代碼測試查看，推薦 phpstudy 把項(xiàng)目放在www目錄下，使用localhost訪問：http://localhost/demoo/
如果想要手機(jī)也訪問到這個(gè)頁面，就需要保證手機(jī)和電腦在同一個(gè)網(wǎng)絡(luò)中，通常用一個(gè)路由器即可做到 windows打開cmd，ipconfig查看ip地址
選中ip地址，鼠標(biāo)右鍵即可復(fù)制，然后替換掉網(wǎng)址欄里的localhost ： http://192.168.10.146/demoo/
在手機(jī)上通過輸入：http://192.168.10.146/demoo/ 即可訪問 嫌麻煩的話也可以使用草料二維碼將網(wǎng)址轉(zhuǎn)二維碼，然后掃碼訪問
常見真機(jī)調(diào)試才能測試出的問題： 如，點(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覽器無法識(shí)別 document.documentElement 解決方法是添加一句： document.body.scrollTop=0;
遠(yuǎn)程調(diào)試工具 Vorlon.js 有時(shí)在pc端可以使用console.log來調(diào)試，但是在移動(dòng)端沒有控制臺(tái)，沒法這么干 移動(dòng)端只有alert可以調(diào)試，但是不太方便 如果想要在手機(jī)端操作，并能在電腦端查看打印出來的結(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是國外鏡像，速度非常慢，建議使用國內(nèi)的淘寶鏡像cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 然后使用淘寶鏡像安裝vorlon cnpm i -g vorlon 輸入vorlon
像我這樣的代表安裝成功哈 在瀏覽器輸入：localhost:1337即可訪問
把下面這句話加入要用vorlon訪問的頁面 <script src="http://localhost:1337/vorlon.js"></script>
電腦端訪問：http://192.168.10.146/demoo/ 然后在手機(jī)上也訪問這個(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)測所有文件的變化： browser-sync start --server --files="*"
然后默認(rèn)瀏覽器會(huì)自動(dòng)打開項(xiàng)目文件
http://localhost:3000 是項(xiàng)目打開頁面， http://localhost:3001是調(diào)試頁面（360瀏覽器自動(dòng)翻譯網(wǎng)頁了）
在cmd中使用ipconfig查看ip地址，然后把localhost換成ip地址，在同一局域網(wǎng)下，用移動(dòng)設(shè)備來訪問網(wǎng)址： 可以使用草料二維碼生成二維碼，微信掃碼打開
能夠?qū)崿F(xiàn)的效果是：當(dāng)你在瀏覽器上操作的時(shí)候（比如上下滑動(dòng)試試），手機(jī)上也會(huì)有同步的操作；反過來也是！?。「杏X好給力?。?！ 當(dāng)修改完文件之后，電腦上會(huì)自動(dòng)監(jiān)測文件變化，修改樣式；不過手機(jī)端我測試了下沒有實(shí)時(shí)生效，估計(jì)是因?yàn)榫彺姘?/p>
終端檢測：檢測訪問網(wǎng)站的終端是PC還是移動(dòng)設(shè)備 為什么要終端檢測： 頁面跳轉(zhuǎn) 加載相應(yīng)資源（比如手機(jī)端更適合zepto，pc端更適合jQuery）
打印navigator.userAgent（我用的谷歌瀏覽器） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>終端檢測</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>
終端檢測可以在后端完成，也可以在前端完成（建議后端來完成，效率更高） 終端檢測實(shí)現(xiàn)頁面跳轉(zhuǎn) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>終端檢測</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>
終端檢測實(shí)現(xiàn)資源加載 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>終端檢測</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>
|
|
|
