樣式表不移動正常工作

Question

我有一個樣式表與此碼在移動設備：

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

但是，這並不在我的iPhone 3GS的工作。當我調整它的大小時，這個樣式表在瀏覽器中工作正常。

如果我將「max-width」值設置爲更大數量的px，例如1000px，那麼它工作正常。 這是爲什麼？

Answer 1

確保您有視口元標記。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 

大多數移動瀏覽器使用980像素的視口寬度將內容呈現爲普通網頁。然後他們擠壓呈現的頁面以適應瀏覽器的實際視口。

這就是爲什麼你的媒體查詢320像素不起作用，但1000px的作品。