html - 区分平板电脑和上网本的 CSS 媒体查询

Question

我在使用一些 CSS 时遇到了一些问题，我试图在平板电脑上查看时隐藏一个 div。平板电脑的 CSS 媒体查询可以处理此任务，但不幸的是，它也捕获了一些非平板电脑的设备，例如上网本。我已经尝试为上网本实现一个单独的媒体查询，但最终发生的是上网本媒体查询与平板电脑媒体查询相结合，并且 div 仍然隐藏。

我用来捕获“上网本”的查询是

@media only screen 
and (min-width : 900px) 
and (max-width : 1160px) {

我用来捕获平板电脑的查询是

@media only screen and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

我知道分辨率有重叠，但是我可以使用其他查询来区分这两者吗？

是的，JS 很好(有一个很好的隧道视野案例，但就在我面前错过了它 :D )并且该链接几乎可以解决它。谢谢!

Answer 1

Matt 的评论为我解答了这个问题。