There are two cookies that get set:
There is also logic checking the if the screen dimensions change, typically if a device is rotated. If they are changed, the cookies get updated to reflect this change.
Once the cookies are set and the code runs, you will have access to the following variables in the page templates:
This allows you to create server side responsive designs, also called Adaptive Design. It allows you to limit the code that gets sent from the browser based on the screen size. Possible uses include sending a smaller image size to a mobile device to improve page load times or changing the content that gets output on mobile/tablet vs desktop so less HTML is sent to the browser. Both cases give you granular control over the output primarily to improve page speed on mobile devices.
In order to use Client Dimensions you first need to create the item for it. Go to User Interface then Items tab and click the plus sign to add an item.
The code should be: clientdimensions
Module should be: cmp-mv-clientdimensions
Next you need to assign the item to the pages you want to use it on. Most of the time it will only be the following 3 pages: SFNT, CTGY, PROD
However, there may be other pages you want to use it on such as checkout. You should assign it to as many pages you will need it on. If you use its variables in the global header, you will need to assign it to all pages.
You will want to place the following item in your Head tag.
You’ll notice the above code has some existing logic to set the class. The dimensions here can be customized to your specific needs, however this allows you to give elements on your site a dynamic class:
You can then add some styles in your stylesheet to style/position elements based on their screen size.