Title: Detect Mobile Browser
Last modified: June 28, 2018

---

# Detect Mobile Browser

 *  [regalit](https://wordpress.org/support/users/regalit/)
 * (@regalit)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/detect-mobile-browser/)
 * Hi all,
 * I have built a responsive custom WordPress theme with media queries. However,
   I would like to make it so that the hamburger menu only displays on a mobile 
   device (including tablets).
 * How would my website be able to detect this?

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [wpbees](https://wordpress.org/support/users/wpbees/)
 * (@wpbees)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/detect-mobile-browser/#post-10443470)
 * Hello,
 * The hamburger menu is always there it is just hidden at certain screen sizes.
   
   you can get the hamburger menu effect on desktop browsers as well, just shrink
   the width of your browser window down and eventually you will see the hamburger.
 * i hope this helps,
 *  Thread Starter [regalit](https://wordpress.org/support/users/regalit/)
 * (@regalit)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/detect-mobile-browser/#post-10443706)
 * Hi wpbees,
 * Thanks for the reply. I would like to only display the hamburger menu on mobile
   devices. If you were to use a 13″ laptop, I don’t want the hamburger, but with
   a 13″ tablet, I do.
 * Is there a way of only showing it on mobile devices?
 *  [Jacob Peattie](https://wordpress.org/support/users/jakept/)
 * (@jakept)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/detect-mobile-browser/#post-10443850)
 * Is a 13″ touch-screen convertible laptop a tablet or a laptop? A piece of code
   can’t answer that.
 * Do you consider only screen size? You’ve said yourself that you consider a 13″
   tablet mobile but a 13″ laptop not.
 * Ok so what about input? One 13″ tablet might have a touch screen, and many 13″
   laptops don’t, but some do. Are they tablets?
 * What about operating system? Well there’s Windows laptops and Windows tablets,
   so testing for that won’t tell you anything.
 * So what if you only want to show the hamburger menu for touch devices, regardless
   of size? Well how do you know if it’s a touch device? Browsers these days can
   tell you if the device supports touch, but I know from experience that this can
   be misleading, because a user could be using a touchscreen laptop with an external
   mouse, or plugged into an external non-touch monitor. Both cases where assuming
   the user is touching the screen would be wrong.
 * So you can see that there is no 100% reliable way to test for a ‘mobile device’.
   Your decision when to show a hamburger menu should be based on whether or not
   you have the space on the screen to display the menu without hiding it away. 
   Not on what fuzzy ‘category’ of device they might be using.
    -  This reply was modified 7 years, 10 months ago by [Jacob Peattie](https://wordpress.org/support/users/jakept/).
 *  Thread Starter [regalit](https://wordpress.org/support/users/regalit/)
 * (@regalit)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/detect-mobile-browser/#post-10444164)
 * It’s because on a PC my hamburger drop-downs are only displaying when I hover
   my mouse over the parent. I can’t get a click event to toggle them. So I would
   like to make the hamburger only work on mobile devices where it stays toggled
   when touched.
 * I am attempting to use this script:
 *     ```
       var isMobile = false; //initiate as false
       // device detection
       if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|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(navigator.userAgent) 
           || /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(navigator.userAgent.substr(0,4))) { 
           isMobile = true;
       }
       ```
   
 * How would I make the hamburger only display if this is true?
 *  [Jacob Peattie](https://wordpress.org/support/users/jakept/)
 * (@jakept)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/detect-mobile-browser/#post-10444342)
 * Well how are you currently getting the hamburger menu to display?
 * Regardless, I want to reiterate that the code you have posted will not address
   any of the points I made. You will still end up with undesirable behaviour on
   some devices.
 * My suggestion would be to not use hover _at all_. I (and a growing number of 
   sites, you might have noticed), have moved away from using hover for any sort
   of interactivity due to the unreliability of detecting whether or not a device
   is capable of hover and whether or not any specific interaction is a touch or
   a click.
 *  Thread Starter [regalit](https://wordpress.org/support/users/regalit/)
 * (@regalit)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/detect-mobile-browser/#post-10444358)
 * When the device width is less than 60rem using CSS Media Queries.
 * I understand, it was a suggestion from my manager.
 * How would I do that?

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Detect Mobile Browser’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 3 participants
 * Last reply from: [regalit](https://wordpress.org/support/users/regalit/)
 * Last activity: [7 years, 10 months ago](https://wordpress.org/support/topic/detect-mobile-browser/#post-10444358)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics