在控制臺-機型-點擊小三角-選擇edit
有更多機型可以選擇
選擇具體的機型之后，dpr是不能更改的，選擇responsive可以更改機型
如果沒有看到dpr就去右邊小點點那里找到并打開
真機除錯：
瀏覽器上的除錯工具只是模擬行為，最后還是需要在真機上查看測驗
可以用一些集成環境搭建服務器，然后上傳代碼測驗查看，推薦 phpstudy
把專案放在www目錄下，使用localhost訪問：http://localhost/demoo/
如果想要手機也訪問到這個頁面，就需要保證手機和電腦在同一個網路中，通常用一個路由器即可做到
windows打開cmd，ipconfig查看ip地址
選中ip地址，滑鼠右鍵即可復制，然后替換掉網址欄里的localhost ： http://192.168.10.146/demoo/
在手機上通過輸入：http://192.168.10.146/demoo/ 即可訪問
嫌麻煩的話也可以使用草料二維碼將網址轉二維碼，然后掃碼訪問
常見真機除錯才能測驗出的問題：
如，點擊回到頂部按鈕，在真機失效
<script>
var backtopEl = document.getElementById('backtop');
backtopEl.addEventListener('click', function () {
document.documentElement.scrollTop = 0;
// document.body.scrollTop = 0;
}, false);
</script>
這段代碼在部分設備可能會失效，因為有些瀏覽器無法識別 document.documentElement
解決方法是添加一句：
document.body.scrollTop=0;
遠程除錯工具 Vorlon.js
有時在pc端可以使用console.log來除錯，但是在移動端沒有控制臺，沒法這么干
移動端只有alert可以除錯，但是不太方便
如果想要在手機端操作，并能在電腦端查看列印出來的結果，就需要這個遠程除錯工具
Vorlon.js依賴于node.js
安裝好最新穩定版的node.js，然后打開cmd，輸入node -v，如果列印出版本代表node.js安裝成功
根據Vorlon.js官網，安裝可以使用：npm i -g vorlon
但是npm是國外鏡像，速度非常慢，建議使用國內的淘寶鏡像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/
然后在手機上也訪問這個網址（注意是同一個局域網下），在vorlon客戶端會顯示已經連接的設備
-0代表電腦除錯模擬，-1是真機除錯的
選擇-1真機除錯的設備，在真機進行操作時，可以在vorlon客戶端查看console的結果（如果你有寫相關除錯代碼的話）
多終端同步工具 Browsersync https://www.browsersync.io/
首先安裝
cnpm install -g browser-sync
安裝完成之后進入專案目錄，在空白處按住shift+滑鼠右鍵，選擇：在此處打開命令視窗
這樣可以保證打開的目錄是位于專案目錄
然后開啟一個自帶服務器，監測所有檔案的變化：
browser-sync start --server --files="*"
然后默認瀏覽器會自動打開專案檔案
http://localhost:3000 是專案打開頁面， http://localhost:3001是除錯頁面（360瀏覽器自動翻譯網頁了）
在cmd中使用ipconfig查看ip地址，然后把localhost換成ip地址，在同一局域網下，用移動設備來訪問網址：
可以使用草料二維碼生成二維碼，微信掃碼打開
能夠實作的效果是：當你在瀏覽器上操作的時候（比如上下滑動試試），手機上也會有同步的操作；反過來也是！！！感覺好給力！！！
當修改完檔案之后，電腦上會自動監測檔案變化，修改樣式；不過手機端我測驗了下沒有實時生效，估計是因為快取吧
終端檢測：檢測訪問網站的終端是PC還是移動設備
為什么要終端檢測：
頁面跳轉
加載相應資源（比如手機端更適合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>
終端檢測可以在后端完成，也可以在前端完成（建議后端來完成，效率更高）
終端檢測實作頁面跳轉
<!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>
終端檢測實作資源加載
<!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="https://www.cnblogs.com/chenyingying0/p/m.域名.com"; //zepto }else{ //location.href="https://www.cnblogs.com/chenyingying0/p/域名.com"; //jQuery } </script> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/141458.html
標籤：JavaScript
上一篇：JavaScript 函式