javascript - 如果使用移动浏览器隐藏 DIV

Question

如果正在使用的浏览器是移动设备，我在操作我的代码以隐藏一个特定的 DIV 时遇到问题。

背景故事:我正在构建一个自定义 WordPress 模板，我的设计完全响应，除了一个特定的 DIV，我使用了一些悬停技术，使用触摸屏看起来不太好，所以我想隐藏如果用户使用的是移动设备，则该部分。

我做了一些搜索，发现这个漂亮的小代码可以检测浏览器是否是移动设备(如果确实存在，请随时向我指出更好的代码，但没有什么大的或任何东西)，我目前只是让它给出一个警告框告诉我它是否是移动浏览器:

<script type="text/javascript"> 
    var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (mobile) { alert("MOBILE DEVICE!!"); } else { alert("NOT A MOBILE DEVICE!!"); }
</script> 

现在我想要做的就是让它本质上说:

if (mobile) { .navWrap {display: none;} }

我知道这不是一个正常运行的代码，我使用 getElementById 做了一些测试但无法弄清楚如何实现我的目标。我确实将我的 .navWrap 类更改为 #navWrap 以便它可以由 getElementById 选择但这也不起作用。

那么，你们有没有哪位了不起的天才能够帮助我？谢谢!

Answer 1

您也可以使用这个缩小的 jQuery 片段来检测您的用户是否正在使用移动设备查看； jQuery.browser.mobile

• jQuery.browser.mobile will be true if the browser is a mobile device

你可以试试这个代码:

   <script type="text/javascript"> 
    var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (mobile) { 
        alert("MOBILE DEVICE!!");
        $('.navWrap').css('display', 'none'); // OR you can use $('.navWrap').hide();
    } 
    else 
    { 
       alert("NOT A MOBILE DEVICE!!"); 
    }
</script>