如何在瀏覽器中模擬設備寬度和方向以測試媒體查詢？

我正在本地開發我的網站，並使用Chrome瀏覽器進行預覽。雖然調整瀏覽器的尺寸非常簡單，可以測試使用max/min-width的媒體查詢，但從我所知道的模擬max/min-device-width的任何內置設置中是不可能的。是否有Chrome擴展模擬移動設備並觸發媒體查詢，具體爲max/min-device-width還有orientation:portrait/landscape？如何在瀏覽器中模擬設備寬度和方向以測試媒體查詢？

我基本上想一些方法來測試與Chrome這個媒體查詢我的電腦上，而不是智能手機：
@media only screen and (max-device-width: 600px) and (orientation: portrait)

來源

2013-12-15 Joey

如果您無法通過Google搜索找到它，它可能不存在。我不依賴瀏覽器調整大小，最好在實際設備上測試它，或加入crossbrowsertesting.com並避免模擬器，它們有很多設備。此外，還有http://mattkersley.com/responsive/只是看各種尺寸。 – Christina

我需要一個本地解決方案。我不想調整，上傳，刷新，重複。否則，我只是使用我的物理設備。 Chrome擴展程序將是完美的！ – Joey

請參閱[僞裝最大設備寬度]（http://stackoverflow.com/questions/6149131/faking-max-device-width）。如果您使用Chrome，用戶_wasabi_的答案可能會對您有所幫助。 –

移動設備仿真可用作Chrome的built-in feature，目前處於測試版頻道。您需要在DevTools設置中啓用它。

來源

2013-12-18 12:16:18 rsanchez

給這一個嘗試...我認爲這正是你所需要的... https://chrome.google.com/webstore/detail/responsiview/kcemonjjmilbiepahkhanlkddonpjlep?hl=en-US

來源

2013-12-16 05:06:37 user1647347

謝謝，但我實際上在發佈之前嘗試過這種擴展。問題在於它不模擬'device-width' - 只有普通的'width'。此外，本地文件完全不起作用。 – Joey

似乎模擬我的設備寬度。不確定本地測試，我只是用實例來使用它。 – user1647347

如何在瀏覽器中模擬設備寬度和方向以測試媒體查詢？

回答

相關問題