AEM 6.3 TO detect from desktop or mobile from which the request came in java?

Avatar

Avatar

srinivas_chann1

Avatar

srinivas_chann1

srinivas_chann1

12-11-2020

Hi ,

 

I am using a component twice due to mobile and desktop views  .Due to which the same JavaScript is getting called twice.

I am using JavaScript to hide based on css.

 

I wanted tp know if desktop or mobile view in java code, in this way i will be able to call the component only once based on views using slightly test logic.

 

Please let me know how to achieve it

 

Thanks

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

12-11-2020

If you have to use components twice just only for 2 different viewports then your design is wrong.

Anyways, you should not check the device from the backend due to caching, it will create other issues.

There can be a solution - 

Add a data attribute(data-js-init="false") in your component DOM. when js initialize/act on your component then change the value to true. write a condition on js it only acts on the component if js value is false.

 

Answers (1)

Answers (1)

Avatar

Avatar

Manjunath_K

Avatar

Manjunath_K

Manjunath_K

12-11-2020

Hi @srinivas_chann1 

Can you please share sample code or screenshot with detail, it will be helpful to understand your use case/problem which you are facing.

 

you can achieve this using single component, load both desktop & mobile view in sightly. using css media query hide/show desktop and mobile view based on viewport.

@media (max-width: 958px) {
//write css style to hide/show using different class names on desktop & mobile view html markup
}

 

you can identify mobile or desktop using User-Agent value in request header.

request.getHeader("User-Agent"); //Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.193 Safari/537.36