从特定设备隐藏 HTML 个元素

Question

我想在特定设备的页面上隐藏一些 HTML 元素，这样当我在 iPad 而不是 PC 上查看时，我可以优化页面结构..

为了在 iPad 上隐藏一些 DIV，我给了元素一个特定的 class ("x1") 然后使用这个 CSS:

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

    div.x1 { 
        visibility: hidden;
    }
}

它确实有效，但是我无法在 PC 版本上模拟相同的内容.. 我怎样才能在仅 PC 的视图中隐藏内容？

Answer 1

仅对桌面使用以下媒体查询

@media only screen and (min-device-width : 1024px) {
    div.x1 { 
        visibility: hidden;
    }
}

Answer 2

在后端解决此过程的另一种方法。如果您正在使用 php，则有功能 $_SERVER['HTTP_USER_AGENT'];，因此您可以知道哪种设备正在访问您的页面。PHP get browser

Hide HTML elements from specific devices