隐藏特定设备中的HTML元素

Question

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

为了在iPad上隐藏一些DIV，我给元素一个特定的类（＆＃34; x1＆＃34;）然后使用这个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