@userAgent - Contains information if a user is viewing your web site from a mobile or desktop web browser so that you can then auto detect and display the appropriate version of your web site. Using the user agent you can show different messages to your.
@language
- Contains the language of the user’s version of the browser. This way you can automatically redirect the user to the matching language version of your website, if available. Using the language, you can also show a specific message depending on the detected language, or even filter your data source.
@devicePixelRatio - Contains the device resolution, the ratio between physical device pixels and DPI-adjusted logical CSS pixels. Using the Device Pixel Ratio you can check if the device your site is loaded into is a Retina Display Device. If it is you can easily serve retina images to it, and if not you can serve the normal resolution non-retina images.
@deviceWidth - Contains the full width of the device, including the UI taskbars. Using the device width you can choose whether to hide or show specific elements on your page, change the style of an element etc.
@deviceHeight - Contains the full height of the device, including the UI taskbars. Using the device height you can choose whether to hide or show specific elements on your page, change the style of an element etc.
@viewportWidth - Contains the width of the device without the UI taskbars. Using the view-port width you can choose whether to hide or show specific elements on your page, change the style of an element etc.
@viewportHeight - Contains the height of the device without the UI taskbars. Using the view-port height you can choose whether to hide or show specific elements on your page, change the style of an element etc.
@documentWidth - Contains the width of the document.
@documentHeight - Contains the height of the document. It's particularly useful for scrolling apps.
@orientation - Contains the orientation change from landscape to portrait mode and vice versa. Using the orientation you can check the orientation of the device and change an element style, class, etc - for example, you can show a background image that is portrait-optimized or landscape-optimized.
George Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. The most popular for its over high-quality Dreamweaver extensions and templates.