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

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工作:)

让我知道！