關於手機響應的沮喪

我相信你們之前很多人都面臨過這個問題。我完成了我的網站的開發。在開發過程中，我使用媒體查詢並使用Firefox響應式設計視圖。我做了一項研究，看看最常見的屏幕分辨率是什麼，並添加了這些分辨率。 Chrome和Opera調整瀏覽器大小也經過測試。關於手機響應的沮喪

今天當我在手機（Moto G）上測試時，我的網站似乎沒有反應。他們的佈局沒有改變。我做的另一件事是使用啓用設備工具欄的Chrome開發人員工具。令我驚訝的是，所選設備改變了我的佈局。

在媒體查詢中，我使用寬度最小寬度和最大寬度進行調整。讀到我看到最明顯的是使用設備寬度，而不是寬度。

那麼，是否需要更改我的所有媒體查詢以查看移動設備上的結果？我在電腦上丟失了屏幕分辨率嗎？

來源

2016-07-23 learner

也許你沒有上傳文件到你的網絡服務器？或者，如果您使用預處理器和應用程序，也許它沒有轉換您的代碼？這些只是我的想法，沒有什麼嚴肅的。

我使用這個媒體查詢中等屏幕：

@media screen and (max-width: 1199px) and (min-width: 992px)

它的工作完美的我，併爲移動屏幕，我甚至不指定最小寬度。

無論如何，我需要代碼粘貼到jsFiddle來幫助你，謝謝。

來源

2016-07-23 23:02:01

例如我用這個屏幕具有最小900px 媒體僅屏幕和的（最小寬度：900px）而這些是我的其它媒體的查詢：媒體僅屏幕和（最小寬度：320像素）和（最大寬度：414px）僅媒體屏幕和（最小寬度：480像素）和（最大寬度：600px的）僅媒體屏幕和（最小寬度：600px的）和（最大寬度：864px）僅媒體屏幕和（最小寬度：667px）和（最大寬度：736px）媒體唯一屏幕和（寬度：800px）和（高度：600px） – learner

這很奇怪。你可以通過PM發送你的網站鏈接，或只是在這裏發佈，所以其他人可以看到它並幫助你。正如我所說，我會很高興，如果你會把一些例子代碼在jsFiddle –

好吧。 www.madebyalex.org – learner

另一個研究後，我發現我忘了meta標籤視窗：

<meta name="viewport" content="width=device-width, initial-scale=1">

並稱，解決了這個問題。

來源

2016-07-24 17:54:28 learner

關於手機響應的沮喪

回答

相關問題