如果使用移动浏览器，则隐藏 DIV答案

【问题标题】：Hiding DIV if using mobile browser如果使用移动浏览器，则隐藏 DIV
【发布时间】：2014-07-13 12:57:57
【问题描述】：

如果正在使用的浏览器是移动设备，我在操作代码以隐藏特定 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 可以选择它，但这也不起作用。

那么，你们中的任何一位出色的天才可以帮助我吗？谢谢！

【问题讨论】：

专业提示：只需制作一个移动网站。
2014 年的专业提示：不要制作移动网站。制作一个响应式网站。
专业提示（2）：使用 Bootstrap
业余提示(1)：不要一概而论。
@ProtocolZero - 1）它已经过时了，2）它不可靠，3）你永远不可能拥有所有的设备来正确测试，4）它可以使用媒体查询轻松解决。

标签： javascript css

【解决方案1】：

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

如果浏览器是移动设备，jQuery.browser.mobile 将为真

你可以试试这个代码：

   <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>

【讨论】：

这是我选择的答案，因为出于某种原因$('.navWrap').css('display', 'none'); 有效而$('.navWrap').hide(); 无效。根据我所做的研究，$('.navWrap').hide(); 应该有效。不幸的是，我不知道足够多的 javascript 来知道为什么它不会。但是，您确实解决了我的问题！谢谢！
@ProtocolZero：欢迎您 :)

【解决方案2】：

您确定您真的关心设备是否是移动设备吗？在大多数情况下，您只关心屏幕大小。

我强烈建议使用 CSS 来有条件地显示内容，请参考CSS media query to target iPad and iPad only? 或iPhone 5 CSS media query 之类的问题。

此外，您似乎实际上对检测触摸屏而不是移动设备感兴趣。有很多不是移动的触摸屏设备。也有技术可以做到这一点，请参考What's the best way to detect a 'touch screen' device using JavaScript?或Best way to detect touchscreens (ipad, iphone, etc)?之类的东西。

【讨论】：

在这种特定情况下，屏幕大小无关紧要。问题不在于屏幕分辨率太小，而是有问题的 DIV 需要一些悬停效果，而且在触摸屏设备上使用悬停效果相当困难。根据我的经验，我发现最好不要具体说明屏幕尺寸，因为现在平板电脑越来越小了。我确实首先考虑了这一点，在我的测试环境中，我有一个 20" 显示器、一个 15" 显示器、一个 10.1" 平板电脑、一个 7" 平板电脑和一个 4ish" 手机我正在测试，而整个 DIV 只需要对他们所有人都隐藏起来。
好的，所以现在需要检测的不是移动设备，而是触摸屏 :) 就在几年前，移动设备并不总是有触摸屏，现在有很多具有触摸屏的非移动设备。您需要检测触摸屏而不是移动设备
也许我用了一个糟糕的词，它本质上是任何不使用鼠标的设备和/或任何悬停效果变得毫无意义的设备。

【解决方案3】：

如果你可以使用 jquery，试试这个：

<script>
     var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
     if (mobile) {$('.navWrap').hide();}
</script>

【讨论】：

我知道这应该可行，但它不适合我。我做了一个谷歌搜索，看看它是否有错字或其他东西，但它对我不起作用。我最终使用了$('.navWrap').css('display', 'none');，它确实有效。否则我会选择这个作为答案。不过我不认为这是你的错！谢谢！
我只能认为这与你的 CSS 课程有关 - 但无论如何，你得到答案很好。 :)

【解决方案4】：

使用 jQuery：

if(mobile) {
    $('.navWrap').hide();
}

【讨论】：

就像我在上面对 sideroxylon 所说的那样，我知道这段代码是准确的并且应该可以工作，但由于某种原因它不会。我最终使用了 Ishan Jain 建议的 $('.navWrap').css('display', 'none');。不过谢谢，我很感激！

【解决方案5】：

您可以为此使用媒体查询。例如，如果您有一个目标移动设备，您可以通过将其放置在媒体查询中来轻松隐藏您的 div。

【讨论】：

我知道，我确实先尝试了这条路线，但是当我开始在家中的设备上进行测试时遇到了麻烦。我最终确实让它工作了，当我继续测试时，如果需要，我可能会回到那个选项。不过谢谢！

【解决方案6】：

另一种选择是在 .CSS 中使用 @media

@media screen and (min-width: 0px) and (max-width: 400px) {
    .navWrap{
        display:none;
    }
}

【讨论】：

【解决方案7】：

if (mobile) {
     document.getElementById("navWrap").style.display = "none"
}

注意 - 我假设 navWrap 是 id，而不是类。如果你想使用类，那么使用 getElementsByClassName 并且不要忘记循环结果。

【讨论】：

是的，但是他的 cmets 清楚地表明他理解其中的区别。
他写了.navWrap 并尝试使用getElementById 的事实清楚地表明他不了解其中的区别。如果他或您尝试过getElementsByClassName，那么您将走上正轨。
实际上，我确实在我的问题中明确指出，我将原始未编辑问题中的 class="navWrap" 更改为 id="navWrap" 以与 getElementsByClassName 一起使用。在这一步之前我的原始代码是 class="navWrap" 所以这是我的起点。 DrC 抓住了这一点，我想下次我会大胆一点......
复制了上面的错误代码，意思是复制getElementById而不是getElementsByClassName。

【解决方案8】：

这就是您不想自己维护 UA 字符串的原因：

从已经这样做了很长时间的人那里得到它 - 你应该对 UA 嗅探的想法感到畏缩。它有时间和地点，比如只修复 Firefox 中的错误……但在我 12 年的职业生涯中，我只做过几次。
您当前的问题可以通过媒体查询来解决。如果您不同意，那么您需要更好地理解媒体查询（不要试图粗鲁）。
您永远无法真正信任 UA 字符串。一些移动浏览器将自己冒充为桌面浏览器，以便从任何进行 UA 嗅探的人那里获得桌面站点的服务。
您应该假设每个屏幕尺寸都有一个设备 - 从 200x200 到 6000x6000。你和你的妻子拥有 766 像素宽的设备就是一个很好的例子，因为在今天之前我从来不知道这些设备存在……但我从 2 年前开始为它们编写代码，因为我放弃了我知道什么的假设屏幕的大小。
以下是来自 detectmobilebrowsers.com 的“移动 UA”检测器示例。我非常喜欢构建正则表达式，但这只是让我呕吐，而且没有什么可以维护或升级的。

/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(ua)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(ua.substr(0,4))

【讨论】：

这是一个彻底的评论，不幸的是，仅此而已。我理解你的观点，但这是一个非常非常没有意义的观点。不幸的是，网页设计行业本身就是一个有缺陷的行业。没有对与错，有这个人的看法和那个人的看法。这是您错过的明显要点。这段代码的全部目的是检测可能具有更大分辨率的移动设备，媒体查询会错过，并隐藏一个元素。媒体查询起着重要的作用，但不是我的问题。不过谢谢，我相信你的意思很好，我很感激。