Show page elements only on IOS & Android devices

Question

Hi! I know there are responsive classes available depending on the device resolution but is there something similar to show elements depending on the device OS ? Thanks in advance

SemiColonWeb · Accepted Answer

Hello,

You can consider using the following code:
[ch_pre type="css"]body:not(.device-touch) .element {
display: none;
}[/ch_pre]

This should work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

suppenhuhn · Answer

Thanks for the response!
Does this class include/exclude touchscreen laptops as well ? To me it's more important to get a specific element shown on Android / IOS and another elements on non Android/IOS devices.
I'm solving this via an additional javascript yet - but if this could be done via css would be cool

Semicolon Web · Answer

Hello,

You can exclude the Laptops are well, using the Media Queries:
[ch_pre type="css"].element {
display: none;
}

@media (max-width: 991.98px) {
body.device-touch .element {
display: block;
}
}[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.