我怎樣才能讓RWD爲手機工作？

Question

我在建SPA。我有

index.html中，我已經得到了一些媒體的查詢，如：

@media screen and (min-width: 640px){ 
    .sidebar { 
    width: 20%; 
    float: left; 
    } 
} 

當我在Firefox中打開網站，我所示的選擇裝置的尺寸，當我選擇較小的尺寸時，RWD顯示出來。側邊欄滑落，圖像更小，等等。問題是，當我在手機（android）上打開網站時，就好像我沒有做過任何這樣的事情。 Google也無法識別RWD更改。我錯過了什麼嗎？

Answer 1

@media屏幕位確實有效 - 但是我使用的主機不允許它。我已經移動了我的網站，並且它對移動友好。只是以爲我會留下這個以防其他人遇到這個問題。託管以前是通過我的學校完成的，所以我沒有很多信息可以分享。

搬到一個合適的主機（godaddy，雖然我沒有真正推薦它，因爲他們沒有任何服務器端腳本）修復了這個問題，沒有做任何其他更改。

Answer 2

請記住，手機上的分辨率變得如此荒謬以至於舊式媒體查詢基本上沒有用於確定設備。當然，我的5英寸手機屏幕上實際上並沒有2560像素，但它使用「設備像素比例」將每個邏輯像素視爲2,3,4或更多像素。

因此，我們可以針對該指標來確定設備。試着改變你的媒體查詢是這樣的：

@media screen and (min-device-width: 640px){ 
    .sidebar { 
    width: 20%; 
    float: left; 
    } 
} 

Answer 3

要定位的手機和設備基本上都正確地使用這個媒體查詢：

@media handheld,screen and (min-width:600px){} 

我還要親自使用最大寬度在最小寬度它縮小規模和代碼分組更有意義，但這可能是我個人的偏好。