Mobile-Aware Hook?

I'd like to do some custom-coding (probably will create a small plugin to do this) that will give me a shortcode I can use to wrap around content on a post or page that I want to appear ONLY if site detects mobile device and another content to display if user is on a desktop computer.

I know that Poloray already has a mobile-detection function, so rather than write a new plugin from scratch, adding additional js, I'd rather just call the Poloray functions to accomplish this.

Can you point me in the right direction?

In the best possible result, I would be able to have a page that looks like this:

[xyz device=phone]I see you are using a phone[/xyz]
[xyz device=tablet]I see you are using a tablet[/xyz]
[xyz device=desktop]I see you are using a desktop computer[/xyz]

And only one line of text would display depending on the device used. Again, I'll be fine writing the plugin -- I just need to find what functions to call.

 

Hello,

Theme implemented on three type of media sizes.
1)
@media only screen and (min-width: 768px) and (max-width: 960px) {
}

2)
@media only screen and (min-width: 480px) and (max-width: 767px) {
}

3)
@media only screen and (max-width: 480px) {
}

You can add your content inside class and make that class display none in the media code you want.
For example:

<div class="phone">I see you are using a phone</div>
After this to show this content only in phone add css code given below.

Code:

@media only screen and (max-width: 480px) {
.phone h1{
display: run-in;}
}
 
.phone h1{
display: none;}

<div class="tablet">I see you are using a phone</div>
After this to show this content only in tablet add css code given below.

Code:

@media only screen and (min-width: 768px) and (max-width: 960px) { 
 
.tablet{
display: run-in;}
 
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.tablet{
display: run-in;}
}
 
.tablet{
display: none;}

<div class="desktop">I see you are using a phone</div>
After this to show this content only in desktop add css code given below.

Code:

@media only screen and (min-width: 768px) and (max-width: 960px) { 
.desktop{
display:none;}
}
 
@media only screen and (min-width: 480px) and (max-width: 767px) {
.desktop{
display:none;}
}
 
@media only screen and (max-width: 480px) {
.desktop{
display:none;}
}

I hope it will help you.