都知道Chrome瀏覽器可以模擬真機尺寸，進行調試開發很方便，但是如果你的真機在預制的配置參數中沒有，而且又不知道該輸入什么尺寸參數，該怎么辦？

(我就是遇到了這樣的問題，折騰了好幾個小時，終于弄清楚了)

1、首先如果不知道自己手頭的設備的可視屏幕尺寸是多少，那么就在代碼里寫下以下這些代碼

const screenWidth = document.body.clientWidth

const screenHeight = document.body.clientHeight

alert(`當前設備的屏幕尺寸(寬 x 高)：${screenWidth} x ${screenHeight}`)

然后在自己手頭的移動設備上運行，顯示出來，比如我的是華為P10,得到的寬高尺寸是：【360 x 573】(這個值單位暫時還不清楚，我還在測試中，一定要弄明白這個參數的單位到底是啥)

2、然后把得到的參數添加到Chrome瀏覽器的模擬真機參數中

image.png

image.png

image.png

3、最后我們除了可以在Chrome調試開發畫面，最關鍵的是可以根據此參數，配合css3中的 @media 編寫針對不同尺寸的移動設備的樣式了

OK啦，這樣一來就能在瀏覽器中調試開發了，不需要每次都到真機上運行查看效果了，非常方便，調試下來的最終畫面效果一定與真機上的是一樣的，注意這里我只說了畫面，對于功能，還是要到真機上調試的噢！

(對了，這還有個好處，如果只是寫畫面，那么只需要去晚上找這個參數，如果找得到，那就不需要買真機了，前提你的應用對功能要求不高，只重視畫面，否則還是最好買個真機來調試功能，不然會有你意想不到的功能bug等著你)

總結

以上是生活随笔為你收集整理的chrome 适配调试_终于明白怎么用Chrome开发适配各种移动端屏幕尺寸了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。