[ACCEPTED]-Hiding DIV if using mobile browser-css

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

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

You can try this code 1 :

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

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

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

Also you seem 5 to be actually interested in detecting touchscreens 4 rather than mobile devices. There are lots 3 of touchscreen devices that are not mobile. There 2 are technologies to do that too, pls refer 1 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)?.

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>

0

Using jQuery:

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

0

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

Another option will be to use @media in 1 .CSS

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

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

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

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

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

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

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

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

5. Here is an example of a "mobile 4 UA" detector from detectmobilebrowsers.com. I 3 thoroughly enjoy building regular expressions, but 2 this one just makes me vomit and is nothing 1 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))