Chrome模擬器問題|媒體查詢

我正在測試自己的自適應網站，可悲的是，當我選擇設備（例如「iPhone 6」）時，Chrome模擬器未顯示響應式視圖。令人討厭的滾動條出現，看起來很可怕，但是，當我調整瀏覽器的大小時，斷點工作正常嗎？Chrome模擬器問題|媒體查詢

這就是我如何定義我的斷點 - 變量$ screen-md設置在一個變量中。我正在使用SASS。

@media screen and (min-width: $screen-md) { }

下面是Chrome模擬器中發生的一個屏幕截圖。

enter image description here

來源

2015-02-09 Filth

你選擇了一個設備後刷新了嗎？你在html的頭部使用了視口元標記嗎？ – veelen 2015-02-10 21:19:19

是的，你的兩個問題都可以。我在網上發現的唯一可能有幫助的事情是將我的媒體查詢更改爲最大寬度而不是最小寬度，但我認爲這是垃圾... – Filth 2015-02-10 21:20:19

我在新網站上遇到類似問題， t代碼。我發現一個解決方法是在Chrome開發工具中，轉到仿真面板（「抽屜」工具的一部分以及控制檯），並取消選中「仿真移動」。 – jpostdesign 2015-05-01 15:49:01

1）檢查$屏幕-MD的存儲，因爲Iphone6 375px是375px寬

2）您的最小寬度更改爲最大寬度。

說明與例如：

@media only screen and (min-width: 375px) {...}

上述代碼裝置「如果設備寬度]大於大於或等於[375px]，然後做{...} 」

@media only screen and (max-width: 375px) {...}

上述代碼裝置「如果設備寬度]不足比或等於[375px]，然後做{...}」

3）我與Chrome的個人經驗是，它有時不加載媒體查詢，即使你是在正確的視口大小。有幾次，我不得不增加最大寬度值1或2像素，使其工作。試試吧！另外，不要忘記清除緩存並刷新頁面。

來源

2016-03-17 18:14:37 Fenil

Chrome模擬器問題|媒體查詢

回答

相關問題