0

i have a responsive website. I would like to disable my header ad banner when the user is browsing from mobile and would like to display under the menu.

my theme has an option to place the header code which i added. But i would like to disable it if the user is from mobile and would like to display it under the menu bar.

is that something achieve able. If yes. Your guidance is required.

Regards, Naaz

Husnain Naz
  • 39
  • 4

3 Answers3

0

I always use the below code , when i HAVE TO :

 var desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
 var orientationSupport = !!window.DeviceOrientationEvent;

if(desktop && !orientationSupport) {
    // your code for desktop pc's
}

But think of using feature detection instead Modenizer is a good place to start and even the source is pritty straightforward to understand.

EDIT:

Found another answer HERE, that gives insights for a similar question.

Community
  • 1
  • 1
Alexander Solonik
  • 8,718
  • 13
  • 56
  • 133
0

Try this: When I google I get this for detecting mobile site. This may help you. 

<script>
var isMobile = {
Android: function() {
    return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
    return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
    return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};

if( isMobile.any() ){
//Load mobile site
}else{
// Desktop Site
}

Prashant
  • 365
  • 2
  • 8
0

For a couple of years now that a different philosophy have emerged. There are just too many machines and operating systems.

Nowadays a lot of designers believe that the only difference between mobile machines and desktop machines (and later also tables) is the width of the screen.

HTML pages that have a viewport with "width=device-width" retain the relation between pixel and a physical measure like an inch. This means that a pixel SHOULD be measured almost the same when using a mobile machine or a desktop one. This means that a 300px over 300px div in a mobile machine should look almost the same as it would on a desktop machine.

This also means that the window width in pixel gets lower as the screen is smaller physically.

Making a long story short, you can use a window width cutoff of 768px to distinguish between mobile and desktop apps.

CSS is obviously preferred in terms of performance over javascript code that shows and hides stuff according to the window width. 

// desktop css
.ad {
  display: block;
}

@media screen and (max-width: 768px) {
  // mobile css
  .ad {
    display:none;
  }
}
Oooogi
  • 363
  • 4
  • 14