1

is it possible to have a div tag that is visible only in specific devices? i want show a div just in browser android devices, and dont show this div in webview android.

<div class="android-devices"><a href="#">Android user please click here to download application</a></div>

Is this possible? I use wordpress

2 Answers 2

2

You can achieve that with javascript.

Firstly add hide class to all your android-devices divs

And add this code to your css file:

.hide {
  display: none;
}

And add this to your javascript file

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
if(isAndroid) {
  var els = document.querySelectorAll('.android-devices');
  els.forEach(function(el) {
      el.classList.remove('hide');
  })
}

This code will detect android devices and will remove the hide classes from your divs.

UPDATE:

If you want to hide some divs on android, you can apply same logic.

Just use this line

el.classList.add('hide');

instead of this

el.classList.remove('hide');

And don't add hide class to your android-devices divs by default.

4
  • Also i what (dont show) this div in webview android. is it possible? Mar 10, 2019 at 10:24
  • Thanks Solhan. But I want to display this Div on (Android browsers) but not display on (Android Webview) Mar 10, 2019 at 10:36
  • For detecting webview or browser you should check header of the request. Check this answer Mar 10, 2019 at 10:40
  • this answer worked for ios. Can you write the full code for Android in a new post here? and "your.app.id" is my package name android app? Mar 10, 2019 at 17:59
0

You can do this by going through following steps

- Setting div to hidden initially ( HTML part )

  <div class="android-devices hide"><a href="#">Android user please click here to download application</a></div>

- Checking if current device is android device, if it is then show div ( JS part )

var isDeviceAndroid = /(android)/i.test(navigator.userAgent);
if( isDeviceAndroid  ){document.getElementsByClassName('android-devices').classList.remove("hide");

}

- Css part

.hide{display:none;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.