In the templates, is there a way to know what type of devices is accessing the site? I need to make certain decisions based on that (e.g. what kind of images to push). An "is_mobile" or "is_tablet" check would be ideal.
asked Jul 21, 2013 at 12:49
-
Are you trying to lighten the server load? Or make sure that mobile devices effectively don't download content (images) that they're not going to see? Is there a reason you can't go with a mobile-first design and use media queries?– user800Commented Jul 21, 2013 at 16:15
-
I want to display, say, a 500x500 image on desktops, but a a 50x50 image on mobiles.– ExpressionEngineNewbieCommented Jul 21, 2013 at 18:54
Add a comment
|
3 Answers
To extend Robson's answer, I've just been implementing this myself in the past few hours!:
MX Mobile Detect and on Devotee
I could simply detect which device it is (e.g. ipad, iPhone, blackberry, etc), but that's too specific for my needs. I just want to detect the different sizes of device so I can drop smaller images...
So, in addition to my JS libraries I have this tag:
{if "{exp:mobile_detect:device}" != "not_mobile"}{exp:mobile_detect:screen_detect}{/if}
This basically drops the JS cookie to detect what type of device and gets height, width, etc, but only if the device is a mobile (includes tablets) - hence the conditional.
I then have custom sizes which can be accessed with the variable {responsive} and return the value I've set.
Here I'm using CE_Image to deliver different sized images from the server:
{if "{responsive}" == "small"}
{exp:ce_img:single src="{image}" alt="{alt-text}" width="420" bg_color="FFF" allow_scale_larger="yes" quality="80" save_type="jpg add_dims="no"}
{if:else}
{exp:ce_img:single src="{image}" alt="{alt-text}" width="938" bg_color="FFF" allow_scale_larger="yes" quality="80" save_type="jpg add_dims="no"}
{/if}
-
This looks very promising. I'm actually using CE Image also and plan to do something very similar to what you're doing. For mobile, you might get away with quality less than 80, don't you think? Also, might get smaller file size with PNG? You may want to look into CE Lossless, too. Commented Jul 21, 2013 at 18:59
-
Have you seen this: devot-ee.com/add-ons/mx-mobile-device-detect? Commented Jul 21, 2013 at 19:04
-
That's the same add-on I've linked to :) Agreed on the quality, but the client requires good imagery as it's a large slideshow images of products. Haven't tried comparing on performance yet, but because they're photos, Jpeg seems to be able to get the better size. Remember "mobile" is also tablet, unless you're referring to my settings based on size. Commented Jul 22, 2013 at 9:21
-
Doh! I think this addon will work for me. Thanks. Commented Jul 22, 2013 at 12:54
The only way of do this is using addons.
There's a lot of them on Devotee. This looks a good bet, but I never used any of them.
Maybe it's better to use some front-end technique for this.
Have you employed any sort of 3rd party statistics/traffic tracking like Google Analytics or StatCounter etc.? You can drill down and do reports for a lot info like that. Or if you are comfortable, you can review your server logs.
Edit > Sorry, not sure if you were asking how to SEE the break down of devices accessing your site, or how to just deliver custom views based on device type (like with media queries etc.).
