Expand my Community achievements bar.

SOLVED

Retrieving the user-agent for Tablet

Avatar

Level 5

Hello Community - We are detecting the user-agent(Desktop/Mobile/Tablet) using WCMUsePojo and based on the user-agent, we are showing the appropriate content in HTL. It is working only for Mobile but when we use "Tablet", it is not working. Can you let me how to retrieve it for tablet?

 

public void activate() throws Exception {

setMobile(getRequest().getHeader("User-Agent").indexOf("Mobile") != -1 ? Boolean.TRUE: Boolean.FALSE);

}

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @v1101

Unlike Mobile, there is no generic name for Tablets in User-Agent Header. For iPad, you can make use of the string "iPad"

Below site has the list of all possible User-Agent values for Tablet. If you have specific list of supported devices, you can write condition accordingly

As an alternative, there are several other options available for device specific logic.

Could you please brief about your component functionality.

View solution in original post

5 Replies

Avatar

Correct answer by
Community Advisor

Hi @v1101

Unlike Mobile, there is no generic name for Tablets in User-Agent Header. For iPad, you can make use of the string "iPad"

Below site has the list of all possible User-Agent values for Tablet. If you have specific list of supported devices, you can write condition accordingly

As an alternative, there are several other options available for device specific logic.

Could you please brief about your component functionality.

Avatar

Level 5
@Vijayalakshmi_S - Thanks for your expedited response. We have an image component. In that component, authors will upload the image for desktop only. Based on the user-agent, i.e for Tablet & Mobile, we need to apply the renditions (Adding path at the suffix for the selected image URL) and based on the user-agent, will show the appropriate image for Tablet and Mobile devices.

Avatar

Community Advisor

Hi @v1101,

Thanks for the details.

You can make use of Core Image component which is an Adaptive Image component that offers responsive features with lazy loading. 

In the design dialog of the component, we have an option to mention all possible width and component will then load the respective width based on the size of the window.

More about this in below docs

If you can't switch component, another option is to use JS to handle device specific image path(src)

Frame the HTL with actual image path -> Amend the src based on the device in JS. Something like below can be tried.

  • Get the image src value - $("img").attr("src");
  • Frame mobile and tablet path using the value above 
  • Target specific device using - $(window).width() 
  • Amend the image src value with respective device path - $(img).attr("src", mobileSrc/tabletSrc)

Avatar

Level 5
@Vijayalakshmi_S - Thank you so much for your imputs. will try this option (JS)

Avatar

Community Advisor
No worries. Update this thread in case of any issues.