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

Hiding DIV if using mobile browser

提问by Protocol Zero

I'm having trouble manipulating my code to hide one specific DIV if the browser being used is a mobile device.

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

Backstory: I'm building a custom WordPress template, and I have my design fully responsive, except for one specific DIV that I'm using some hover techniques that just don't look fancy using a touch screen, so I want to just hide that section if the user is using a mobile device.

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

I did some searching and found this little nifty code that can detect if the browser is a mobile device (please feel free to point me towards a better code if one does exist, but nothing gigantic or anything), I currently just have it giving an alert box telling me if it's a mobile browser or not:

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

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

Now all I'm wanting to do is have it essentially say:

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

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

I know that's not a functioning code, I did some testing using getElementByIdbut couldn't figure out how to accomplish my goal. I did change my .navWrap class to #navWrap so it could be selected by getElementByIdbut that didn't work either.

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

So, any of you amazing geniuses out there able to help me out? Thanks!

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

回答by Ishan Jain

you can alos use this minified jQuery snippet to detect if your user is viewing using a mobile device ; jQuery.browser.mobile

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

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

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

You can try this code :

你可以试试这个代码：

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

回答by Oleg Mikheev

Are you sure you really care if device is mobile or not? In most cases you only care about screen size.

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

I would strongly suggest using CSS to conditionally display content, please refer to questions like CSS media query to target iPad and iPad only?or iPhone 5 CSS media query.

我强烈建议使用 CSS 有条件地显示内容，请参考CSS 媒体查询之类的问题，以仅针对 iPad 和 iPad？或iPhone 5 CSS 媒体查询。

Also you seem to be actually interested in detecting touchscreens rather than mobile devices. There are lots of touchscreen devices that are not mobile. There are technologies to do that too, pls refer to something like What's the best way to detect a 'touch screen' device using JavaScript?or Best way to detect touchscreens (ipad, iphone, etc)?.

此外，您似乎实际上对检测触摸屏而不是移动设备感兴趣。有很多触摸屏设备不是移动设备。也有一些技术可以做到这一点，请参考使用 JavaScript 检测“触摸屏”设备的最佳方法是什么？或检测触摸屏（ipad、iphone 等）的最佳方法？.

回答by sideroxylon

If you can use jquery, try this:

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

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

回答by Filype

Using jQuery:

使用jQuery：

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

回答by Ali Gajani

You can use media queries for this. For example, if you have a target mobile device in mind, you can easily hide your div by placing it in the media query.

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

回答by Ryan Wheale

Here is why you don't want to maintain a UA string yourself:

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

1. Take it from the people who have done this for a loooong time - you should cringe at the idea of UA sniffing. There is a time and a place for it, like fixing a bug in Firefox ONLY... but I have only done that a handful of times in my 12 year career.

2. Your current problem can be solved with media queries. If you disagree, then you need to develop a better understanding of media queries (not trying to be rude).

3. You can never really trust a UA string. Some mobile browsers impersonate themselves as desktop browser just so that they get served the desktop site from anybody doing UA sniffing.

4. You should assume that there is a device for every screen size- from 200x200 to 6000x6000. The fact that you and your wife have devices that are 766 pixels wide is a perfect example, because I never knew those devices existed before today... but I coded for them starting 2 years ago because I gave up the assumption that I knew what size a screen is going to be.

5. Here is an example of a "mobile UA" detector from detectmobilebrowsers.com. I thoroughly enjoy building regular expressions, but this one just makes me vomit and is nothing that can be maintained or upgraded.

1. 从已经这样做了很长时间的人那里得到它 - 你应该对 UA 嗅探的想法感到畏缩。有它的时间和地点，比如只修复 Firefox 中的错误……但在我 12 年的职业生涯中，我只做过几次。

2. 您当前的问题可以通过媒体查询解决。如果您不同意，那么您需要更好地理解媒体查询（不要试图粗鲁）。

3. 您永远无法真正信任 UA 字符串。一些移动浏览器将自己伪装成桌面浏览器，以便从任何进行 UA 嗅探的人那里获得桌面站点的服务。

4. 您应该假设每个屏幕尺寸都有一个设备- 从 200x200 到 6000x6000。你和你妻子拥有 766 像素宽的设备这一事实就是一个完美的例子，因为在今天之前我从来不知道这些设备存在......但我从 2 年前开始为它们编码，因为我放弃了我知道什么的假设屏幕的大小。

5. 这是来自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))

/(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.(浏览器|链接)|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|-[aw])|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)|s​​y(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))

回答by lStoilov

Another option will be to use @media in .CSS

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

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

回答by DrC

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

Note - I assumed navWrap was the id, not the class. If you want to use class, then use getElementsByClassName and don't forget to loop over the result.

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