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

[srinivas_chann1]

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

[Manjunath_K]

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

[arunpatidar · Accepted solution]

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.

[srinivas_chann1]

Thanks for the input. Agree to your comments , could you provide any sample code will help me to write this

[arunpatidar]

$(document).ready(function(){
	const componentSelector =".mycomponent1"
	let componentInit = $(componentSelector).data("jsInit");
	if(componentInit == false){
		
	      // logic

	      // set data.-init to ture
	      $(componentSelector).data("jsInit", true);
	}
});