|
在控制臺-機型-點擊小三角-選擇edit 有更多機型可以選擇
選擇具體的機型之后，dpr是不能更改的。選擇responsive可以更改機型 如果沒有看到dpr就去右邊小點點那里找到并打開
真機調(diào)試： 瀏覽器上的調(diào)試工具只是模擬行為，最后還是需要在真機上查看測試 可以用一些集成環(huán)境搭建服務(wù)器，然后上傳代碼測試查看，推薦 phpstudy 把項目放在www目錄下，使用localhost訪問：http://localhost/demoo/
如果想要手機也訪問到這個頁面，就需要保證手機和電腦在同一個網(wǎng)絡(luò)中，通常用一個路由器即可做到 windows打開cmd，ipconfig查看ip地址
選中ip地址，鼠標(biāo)右鍵即可復(fù)制，然后替換掉網(wǎng)址欄里的localhost ： http://192.168.10.146/demoo/
在手機上通過輸入：http://192.168.10.146/demoo/ 即可訪問 嫌麻煩的話也可以使用草料二維碼將網(wǎng)址轉(zhuǎn)二維碼，然后掃碼訪問
常見真機調(diào)試才能測試出的問題： 如，點擊回到頂部按鈕，在真機失效 <script>
var backtopEl = document.getElementById('backtop');
backtopEl.addEventListener('click', function () {
document.documentElement.scrollTop = 0;
// document.body.scrollTop = 0;
}, false);
</script>
這段代碼在部分設(shè)備可能會失效，因為有些瀏覽器無法識別 document.documentElement 解決方法是添加一句： document.body.scrollTop=0;
遠(yuǎn)程調(diào)試工具 Vorlon.js 有時在pc端可以使用console.log來調(diào)試，但是在移動端沒有控制臺，沒法這么干 移動端只有alert可以調(diào)試，但是不太方便 如果想要在手機端操作，并能在電腦端查看打印出來的結(jié)果，就需要這個遠(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/ 然后在手機上也訪問這個網(wǎng)址（注意是同一個局域網(wǎng)下），在vorlon客戶端會顯示已經(jīng)連接的設(shè)備
-0代表電腦調(diào)試模擬，-1是真機調(diào)試的 選擇-1真機調(diào)試的設(shè)備，在真機進行操作時，可以在vorlon客戶端查看console的結(jié)果（如果你有寫相關(guān)調(diào)試代碼的話）
多終端同步工具 Browsersync https://www./ 首先安裝 cnpm install -g browser-sync 安裝完成之后進入項目目錄，在空白處按住shift+鼠標(biāo)右鍵，選擇：在此處打開命令窗口
這樣可以保證打開的目錄是位于項目目錄 然后開啟一個自帶服務(wù)器，監(jiān)測所有文件的變化： browser-sync start --server --files="*"
然后默認(rèn)瀏覽器會自動打開項目文件
http://localhost:3000 是項目打開頁面， http://localhost:3001是調(diào)試頁面（360瀏覽器自動翻譯網(wǎng)頁了）
在cmd中使用ipconfig查看ip地址，然后把localhost換成ip地址，在同一局域網(wǎng)下，用移動設(shè)備來訪問網(wǎng)址： 可以使用草料二維碼生成二維碼，微信掃碼打開
能夠?qū)崿F(xiàn)的效果是：當(dāng)你在瀏覽器上操作的時候（比如上下滑動試試），手機上也會有同步的操作；反過來也是?。?！感覺好給力！??！ 當(dāng)修改完文件之后，電腦上會自動監(jiān)測文件變化，修改樣式；不過手機端我測試了下沒有實時生效，估計是因為緩存吧
終端檢測：檢測訪問網(wǎng)站的終端是PC還是移動設(shè)備 為什么要終端檢測： 頁面跳轉(zhuǎn) 加載相應(yīng)資源（比如手機端更適合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>
終端檢測可以在后端完成，也可以在前端完成（建議后端來完成，效率更高） 終端檢測實現(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>
終端檢測實現(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>
|
|
|
