2

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.

  • 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? – user800 Jul 21 '13 at 16:15
  • I want to display, say, a 500x500 image on desktops, but a a 50x50 image on mobiles. – ExpressionEngineNewbie Jul 21 '13 at 18:54
5

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.

Settings for Mobile Detect

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}
| improve this answer | |
  • 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. – ExpressionEngineNewbie Jul 21 '13 at 18:59
  • Have you seen this: devot-ee.com/add-ons/mx-mobile-device-detect? – ExpressionEngineNewbie Jul 21 '13 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. – Peter Lewis Jul 22 '13 at 9:21
  • Doh! I think this addon will work for me. Thanks. – ExpressionEngineNewbie Jul 22 '13 at 12:54
3

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.

| improve this answer | |
-1

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.).

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.