Show div on android devices

Question

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

fatihsolhan · Accepted Answer · 2019-03-10T10:28:27.737

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.

edited Mar 10 '19 at 10:28

answered Mar 10 '19 at 10:08

fatihsolhan

565
5
19

Also i what (dont show) this div in webview android. is it possible? – omid chahardoli Mar 10 '19 at 10:24
Thanks Solhan. But I want to display this Div on (Android browsers) but not display on (Android Webview) – omid chahardoli Mar 10 '19 at 10:36
For detecting webview or browser you should check header of the request. [Check this answer](https://stackoverflow.com/a/37705154/7971182) – fatihsolhan Mar 10 '19 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? – omid chahardoli Mar 10 '19 at 17:59

score 0 · Answer 2 · answered Mar 10 '19 at 10:07

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

Show div on android devices

2 Answers2

- Setting div to hidden initially ( HTML part )

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

- Css part