adi_mobile - Mobile browser detection

gomedia · 2012-03-07 20:32:24

hallstu wrote:

Hi Adi, sorry I completely forgot to reply to this – but just in case you’re interested, turns out HTC (not Android) spoof the user agent by default to appear as a mac, but you can switch this off in the phone settings. No idea why they do this but your plugin works great now.

Phew! Thanks fror letting me know.

jstubbs · 2013-02-16 10:48:05

Hi Adi,

Not sure if I’m using your plugin correctly – I placed <txp:adi_mobile /> at the top of my page template (first above anything else and then later before the ending </head> tag just to test both options). Then in the page:

<txp:adi_if_mobile>
	<txp:article limit="10">
<txp:else />
	<txp:article limit="30">
</txp:adi_if_mobile>

That returns a big blank i.e no articles are returned at all and debugging says nothing. The purpose is simply to return fewer articles on mobile, not sure what I’m missing?

Edit: Now I realise what the error is. Pain!

Last edited by jstubbs (2013-02-16 10:54:32)

Bloke · 2013-10-15 22:21:00

Is there any way this marvellous plugin could be coerced into detecting retina displays, maybe making some txp:variable available so we can decide server-side whether to serve images at standard res or @2x? The only reliable way seems to be from javascript:

var retina = window.devicePixelRatio && window.devicePixelRatio >= 2;

Even if that could be checked on first visit and a cookie set, which could manifest itself as a txp:var on second page view, it’d be better than nothing.

At least then only the first page would be in standard res on such devices and a refresh or jump to another page would allow me to use something like smd_thumbnail to deliver the right image size to the right devices, without having to download both sets to mobiles, or to upload all images at double res and scale them back to 50% with a media query.

Any Adi magic beans available for this challenge?

gomedia · 2013-10-16 10:04:55

Bloke wrote:

Any Adi magic beans available for this challenge?

Hi Stef. Shouldn’t be a problem … Just recovering from a trip to the Old Country … I’ll look into it when I find some magic coffee beans.

NicolasGraph · 2013-11-14 11:39:31

Hi,
I have this problem
Anyone? Thx!

Edit: Seems to be fix. I forgot the <txp:adi_mobile /> tag before to use <txp:adi_if_mobile>!

Last edited by NicolasGraph (2013-11-14 12:02:59)

colak · 2015-05-07 09:41:56

Hi adi,

I’d like to use your plugin to detect android devices and serve them different code for the videos on a recently launched site. Would the code below work?

<txp:adi_if_mobile>
<txp:adi_if_mobile type="android">
<iframe src="https://player.vimeo.com/video/<txp:link_description escape="" />?color=ba0000&amp;title=0&amp;byline=0&amp;portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<txp:else />
<iframe src="https://player.vimeo.com/video/<txp:link_description escape="" />?title=0&amp;byline=0&amp;portrait=0" allowfullscreen></iframe>
</txp:adi_if_mobile>
</txp:adi_if_mobile>

ps. The reason I am serving different content is that I want to be serving valid html whenever possible.

gomedia · 2015-05-07 22:25:21

Hi Yiannis … yes, that looks good to me.

colak · 2015-05-08 05:48:58

Thanks!

RedFox · 2016-02-03 08:41:53

In this article I’m using adi_mobile with smd_thumbnail and smd_macros to render a small image if the viewport is 640px or less and a larger one if the viewport is larger than 640px:

<txp:adi_mobile />
<txp:adi_if_mobile width="640">
<txp:smd_thumbnail id="{img_id}" type="small" />
<txp:else />
<txp:smd_thumbnail id="{img_id}" type="{style}" />
</txp:adi_if_mobile>

with this tag in the article:

<txp:smdadi id="182" type="landscapemedium"/>

The outcome is that the smaller one is rendered (look with your smartphone); the larger one is not. I guess the if/else construction isn’t right … :|

Can anybody help me with this one, please?

[edit]
It looks like the “landscapemedium” is rendered if the viewport is 640 or less … !? What am I missing here?

Last edited by RedFox (2016-02-03 09:06:08)

gomedia · 2016-02-03 09:02:50

RedFox wrote #297712:

The outcome is that the smaller one is rendered; the larger one is not.

You’re actually testing for a width of exactly 640 px. Use the “narrow” option to define the upper limit & then test.

Try something like this instead:

<txp:adi_mobile narrow="640" />
<txp:adi_if_mobile width="narrow">
...
<txp:else />
...
</txp:adi_if_mobile>

BTW I assume you’re using the <txp:adi_mobile_script /> tab to detect the viewport width?

RedFox · 2016-02-03 09:25:20

Thanks for joining in … :)

The snippet now:

<txp:adi_mobile narrow="640" />
<txp:adi_if_mobile width="narrow">
<txp:smd_thumbnail id="{img_id}" type="small" />
<txp:else />
<txp:smd_thumbnail id="{img_id}" type="{style}" />
</txp:adi_if_mobile>

And <txp:adi_mobile_script /> is at the bottom of the HTML page. After the jQuery call.

“small’ is rendered … :)

No rendering of “landscapemedium” … !?

Last edited by RedFox (2016-02-03 15:32:27)

gomedia · 2016-02-03 09:42:56

RedFox wrote #297714:

And <txp:adi_mobile_script /> is at the bottom of the HTML page. Under the jQuery call.

<txp:adi_mobile_script /> sets a TXP variable which <txp:adi_mobile /> uses, so it needs to be at the top of the page.

No rendering of “landscapemedium”; and an error on mobile: Unknown image when rendering “txp:smd_thumbnail id=“183” (and 182) type=“small” /> … !?

<txp:adi_if_mobile /> won’t return anything if the page is not being rendered on a mobile. From the plugin help: “… adi_if_mobile will not return any output, regardless if the condition is true or false, if no mobile has been detected or if mobile mode has been disabled.”

Textpattern CMS

Textpattern CMS support forum

#37 2012-03-07 20:32:24

Re: adi_mobile - Mobile browser detection

#38 2013-02-16 10:48:05

Re: adi_mobile - Mobile browser detection

#39 2013-10-15 22:21:00

Re: adi_mobile - Mobile browser detection

#40 2013-10-16 10:04:55

Re: adi_mobile - Mobile browser detection

#41 2013-11-14 11:39:31

Re: adi_mobile - Mobile browser detection

#42 2015-05-07 09:41:56

Re: adi_mobile - Mobile browser detection

#43 2015-05-07 22:25:21

Re: adi_mobile - Mobile browser detection

#44 2015-05-08 05:48:58

Re: adi_mobile - Mobile browser detection

#45 2016-02-03 08:41:53

Re: adi_mobile - Mobile browser detection

#46 2016-02-03 09:02:50

Re: adi_mobile - Mobile browser detection

RedFox wrote #297712:

#47 2016-02-03 09:25:20

Re: adi_mobile - Mobile browser detection

#48 2016-02-03 09:42:56

Re: adi_mobile - Mobile browser detection

RedFox wrote #297714:

Board footer