Question

我正在尝试使用媒体查询（例如Microsoft website）为桌面设备，手机和平板电脑构建响应式网站。 meta tag和media queries的编写如下：

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


    @media only screen and (min-device-width:320px) and (max-device-width:720px), only screen and (min-width:320px) and (max-width:720px) {
     /*-- this is for mobile --*/
    hide C, show A, D
    }

@media only screen and (min-device-width:721px) and (max-device-width:1023px), only screen and (min-width:721px) and (max-width:1023px) {
          /*-- this is for tablet --*/
          hide B, show A, C
}
@media only screen and (min-device-width:1024px), only screen and (min-width:1024px)  {
          /*-- this is for desktop --*/
          show A, B, C. hide D
}

它适用于台式机和平板电脑，但不适用于手机。我在Android手机和Windows手机上测试过这个网站，看来在手机上，这个网站的某些页面表现不错，其他有点像手机版和平板电脑版的组合。例如菜单栏。在移动版本中，每个页面中的菜单栏应显示A，D并隐藏C（参见上面的代码）。但它在某些页面中显示A，C，D（以及平板电脑风格的A，C），并在其他一些页面上显示A，D。

当我将媒体查询更改为：

@media only screen and (min-device-width:320px) and (max-device-width:720px) {
 /*-- this is for mobile --*/
hide C, show A, D
}

@media only screen and (min-device-width:721px) and (max-device-width:1023px)
          /*-- this is for tablet --*/
          hide B, show A, C
}

@media only screen and (min-device-width:1024px) {
          /*-- this is for desktop --*/
}

然后问题解决了，似乎手机上的浏览器混淆了平板电脑版和本网站的移动版。但就这样，我无法在桌面浏览器上测试网站。我该如何解决这个问题？

@media查询在移动浏览器上运行良好

0 个答案: