pro_mobile

hilaryaq · 2012-02-07 19:20:07

Hi Uli, sorry about that I’m not sure what happened maybe a cache or something? I was just using ahrefs, so just changed it for the txp file download link and tested looks to be working now I hope!! Thanks for letting me know about that, let me know if it’s working now.. fingers crossed!

uli · 2012-02-07 21:21:11

Yup, both delivered a 0.3 version. Thanks, Hilary!

colak · 2012-04-20 11:55:20

Hi hilary,

I’m looking at your plugin and I have to admit that I’m at a loss with smart mobile devices. Your plugin can detect a number of agents but I’m not sure as to the resolutions each one of those devices are capable of which – in my possibly naive way of thinking – is what is important. Can you – or somebody here – shed some light regarding this?

hilaryaq · 2012-04-20 12:13:28

Hi Colak! If you take a look at the code behind my page, I actually use stylesheets for the resolutions of a device, so my plugin would be best used in conjunction with css media queries, if you haven’t come across those I have another article here: Stylesheets with media queries

To be honest, I found a lot can be done with media queries alone, and the custom icon for iphone/apple devices makes it very ‘app’ like if it’s added to the home screen. It leaves the plugin then sniff for the actual device being used but more supplementary to media queries because they handle the resolution issue without the need for a plugin, hope that answers it, feel free to dig into the code on that site to see how the mobile version was formed! (I’ll include my css code for the mobile stylesheet in that article shortly)

hilaryaq · 2012-04-20 12:37:02

Or if you Google ‘responsive web design’ it’ll give you lots of info on css media queries and how to use them..

I could include the code for media queries in the plugin which is the only way I would implement a resolution based approach to mobile web (using a plugin to ‘sniff’ the resolution isn’t the recommended approach), it’s also extremely handy to be able to re-size a browser window and instantly see your mobile stylesheet render, plus it’s device independent, resolution based, and does it correctly. My plugin would be something you might use to display a custom message to an iphone user for example, but it would be bad advice to say you should use a plugin to determine device resolution when media queries are the correct way to do it!

Another plugin of mine for mobile dev is here: http://forum.textpattern.com/viewtopic.php?id=37723

That is currently the only Google Maps v3 plugin (V2 does not work on Ipad or some other mobile devices), so it renders on desktop or mobile and again you can use responsive web design/css to adapt the size of the map for mobile etc..

Last edited by hilaryaq (2012-04-20 12:41:58)

colak · 2012-04-20 14:06:40

Again, excuse my ignorance on the matter but from what you are suggesting the following might/should work. right?

<txp:pro_mobile> 
<link rel="stylesheet" media="handheld, only screen and (max-device-width: 480px)" href="/small_screen.css" />
<link rel="stylesheet" media="handheld, only screen and (min-device-width: 768px)" href="/mycss.css" />
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="/small_screen.css" />
<txp:else />
<link rel="stylesheet" media="screen" type="text/css" href="/mycss.css" />
</txp:pro_mobile>

>edited to add iphone4

Last edited by colak (2012-04-20 15:26:53)

hilaryaq · 2012-04-20 16:26:47

Hi Colak, you don’t need to use the pro_mobile plugin for the media queries at all! You would keep pro_mobile for things like perhaps showing a message to download the app for iphone if the device is iphone etc. So the media query code can execute without it..

colak · 2012-04-20 17:12:49

Hi Hillary, thanks again for your insight. The reason I am thinking to use the media queries within your plugin is because I am thinking to create mobile specific layouts so as your plugin detects mobile devices I can start from there and serve the stylesheets I want. Regarding desktop media I was thinking of sticking with 960px width.

hilaryaq · 2012-04-20 17:19:11

Yep I’m using 960 all the time now, and even for tablets, the resolution is getting so good you don’t really need to do tablet specific anymore.. but for mobile phone it’s just so much better to serve a mobile layout for that tiny screen!

You can use the plugin to sniff, but if you don’t the media queries will still implement based on the page width, it’s a good catch all to use the media queries on their own because any new devices that come along will still be served the mobile stylesheet based on their resolution rather than device, so they don’t need to be added to the plugin array I would recommend that way but if you feel that works for you maybe it suits your specific project to implement that way :)

HerrJemineh · 2012-07-13 14:42:20

Thank you, very useful and easy to use plugin! :-)

Unfortunately it doesn’t work with Opera Mobile (!= Opera Mini¹). Its user agent looks something like
Opera/9.80 (Linux; Opera Mobi/35779; U; de) Presto/2.10.254 Version/12.00 [2], so I added 'opera mobi', // Opera mobile to the $agents array which seems to work well. Maybe you might want to change this in a future version?

¹ http://www.opera.com/mobile/download/versions/

² installed on my desktop pc running linux, might differ from cell phones

hilaryaq · 2012-07-13 14:48:28

Thanks for that will add it in! Glad it was useful for you!

Textpattern CMS

Textpattern CMS support forum

#25 2012-02-07 19:20:07

Re: pro_mobile

#26 2012-02-07 21:21:11

Re: pro_mobile

#27 2012-04-20 11:55:20

Re: pro_mobile

#28 2012-04-20 12:13:28

Re: pro_mobile

#29 2012-04-20 12:37:02

Re: pro_mobile

#30 2012-04-20 14:06:40

Re: pro_mobile

#31 2012-04-20 16:26:47

Re: pro_mobile

#32 2012-04-20 17:12:49

Re: pro_mobile

#33 2012-04-20 17:19:11

Re: pro_mobile

#34 2012-07-13 14:42:20

Re: pro_mobile

#35 2012-07-13 14:48:28

Re: pro_mobile

Board footer