媒體查詢移動（智能手機和平板電腦）

Question

我想製作我的網站的2個版本，一個是針對桌面（PC和筆記本電腦），另一個針對移動設備（智能手機和平板電腦）。我搜索了它並閱讀了一些關於媒體查詢的文章。所以我把我的設計這個媒體查詢（主要是在此基礎上reference）：

/* For mobile and smartphones */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/*style*/ 
} 

/* For tablet */ 
@media only screen and (min-device-width : 768px) { 
/*style*/ 
} 

/* For iPhones */ 
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and 
(min-device-pixel-ratio : 1.5) { 
/*style*/ 
} 

我測試過它在多個設備上。它適用於移動和智能手機（我在xperia，samsung galaxy mini和nexus 4等幾款智能手機上試用過），但顯然它在平板電腦上無法使用（我在nexus 7和galaxy tab上試過）。當我在平板電腦上打開網站時，它會一直顯示桌面版本，而不是移動版本。任何想法是如何發生的？感謝:-)

Answer 1

你是否也有：

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

在該網站的標題部分

？此代碼將禁止在平板電腦上的變焦效果，也許你會mediaqueries工作:)

讓我知道！