如何使用 jQuery 在移动视图中隐藏 HTML 元素？

假设我们给出了一个 HTML 文档，任务是在 jQuery 的帮助下在移动视图中隐藏一个 HTML 元素。

方法：

• 最初，我们需要检测我们的系统是否为“移动”，为此 使用 window.navigator.userAgent属性。它返回一个字符串，其中包含有关浏览器名称、版本和平台的信息。因此，使用此字符串我们可以检测我们的系统。
• 为了隐藏 HTML 元素，使用了hide()方法。
• 在这里，在我们的代码中，我们将在移动视图中隐藏表格的一列。在表格的桌面视图中，我们有四个不同的列，表格标题分别为GFG UserHandle、Practice Problems、Coding Score和 GFG Articles。
• 在移动视图中，我们将通过使用元素的类名获取元素来隐藏练习问题列。

实现代码：

html

  

    
    GFG User Details
  
    
    
    
  
    
    
        table {
            margin: 0 auto;
            font-size: large;
            border: 1px solid black;
        }
  
        h1 {
            text-align: center;
            color: #006600;
            font-size: xx-large;
            font-family: 'Gill Sans', 'Gill Sans MT',
                ' Calibri', 'Trebuchet MS', 'sans-serif';
        }
  
        td {
            background-color: #E4F5D4;
            border: 1px solid black;
        }
  
        th,
        td {
            font-weight: bold;
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
  
        td {
            font-weight: lighter;
        }
    

  

    
        GeeksForGeeks
  
        
        
            
                
                
                
                
                
            
            
            
                
                
                
                
            
            
                
                
                
                
            
            
                
                
                
                
            
            
                
                
                
                
            
            
                
                
                
                
            
        GFG UserHandlePractice ProblemsCoding ScoreGFG ArticlesUser-115010030User-21007530User-32005010User-45052User-5000
    
      
    
        // CONDITION TO DETECT SYSTEM
        if (window.navigator.userAgent.indexOf("Mobile") > -1) {
            // HIDING ELEMENTS
            $(".gfgpp").hide();
        }                                          
    

  

输出：

桌面视图：

移动端视图：移动端视图中，练习题栏已成功。