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

Question

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

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.

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 getElementById but couldn't figure out how to accomplish my goal. I did change my .navWrap class to #navWrap so it could be selected by getElementById but that didn't work either.

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

Answer 1

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

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

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> 

Answer 2

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 .

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)? .

Answer 3

If you can use jquery, try this:

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

Answer 4

Using jQuery:

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

Answer 5

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.

Answer 6

Another option will be to use @media in .CSS

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

Answer 7

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.

Answer 8

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

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.

/(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))