移动媒体查询（智能手机和平板电脑）

Question

我想制作我的网站的2个版本，一个针对桌面（PC和笔记本电脑），另一个针对移动设备（智能手机和平板电脑）。我用Google搜索并阅读了一些有关媒体查询的文章。所以我把这个媒体查询放在我的设计中（主要基于这个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">

在网站的标题部分？此代码将禁用平板电脑上的缩放效果，可能您的媒体查询将起作用：）

告诉我！