Html @媒体查询在移动浏览器上无法正常工作

我正在尝试建立一个响应性强的网站，使用媒体查询，如桌面、手机和平板电脑。元标记和媒体查询的编写如下：

<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
}

然后问题解决了，手机上的浏览器似乎把这个网站的平板版和手机版搞混了。但这样，我就无法在桌面浏览器上测试网站。

---

如何解决此问题？

@仅媒体屏幕和最大宽度：1024px*-不建议使用设备宽度。。。差别很微妙，但很重要。。。使用*-device width可以防止内容在台式机或其他允许调整窗口大小的设备上自适应，因为查询基于实际设备大小，而不是浏览器窗口的大小。您是对的，但是*-width在手机和平板电脑上不起作用。我必须使用*-devoice width才能让网站在手机和平板电脑上运行。@user3794582您不需要设备宽度，您需要在html中有viewport meta标记。同时，考虑参加一门反应设计课程。Christina感谢您的建议，稍后我将尝试在CSS中添加视口规则。顺便说一句，我确实把meta标签放进去了，我把它放在上面了。

@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 --*/
}