0

我想制作我的网站的 2 个版本，一个针对台式机（PC 和笔记本电脑），另一个针对移动设备（智能手机和平板电脑）。我用谷歌搜索并阅读了一些关于媒体查询的文章。所以我把这个媒体查询放在我的设计中（主要基于这个参考）：

/* 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 上尝试过）。当我在平板电脑上打开网站时，它一直显示桌面版本而不是移动版本。知道它是如何发生的吗？谢谢 ：-）

4

1 回答 1

0

你有没有：

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

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

让我知道！

于 2013-01-24T08:44:21.937 回答