There are some things that should not be handled with responsive design. For example I’m creating bonus content for devices with very large screens. Using responsive design, the common technique is to load this bonus content into the dom but not show it for certain size screens. However this still takes its toll on the load time and would impact performance of the device since it would still have the content in its memory.
For the bonus content, I am going to display a large graphic image only on devices that meet a certain height and width requirement. This can be easily accomplished without a third party plug in or framework using standard JavaScript.
The JavaScript behind this is surprisingly simple and cross browser compatible. I have tested successfully on PC’s with new ie and firefox, surface pro, android 2.2 up, ipad, iphone, blackberry playbook, older imac with safari.
var screenheight=screen.height; var screenwidth=screen.width;
if(screenwidth>=1280 && screenheight >= 1000){
// execute my sweet js script to display bonus content.
}