Responsive Design – Detector tool

What is it?

Often we turn to responsive design and its breaking points to develop and design websites which look good, in all different screen sizes.

Sometimes the simplest of tools can be the most useful of them all. I have come up with the following tools that can be used, bookmarked for development.

I wanted this tool to be both simple to get hold of, and easy to use and setup without any hassle or dependencies.

How to use it

1. Bookmark this detector tool by drag-and-drop on your bookmark toolbar.
2. When you develop your website click the new bookmark and then re-size your browser window (horizontally preferably)
3.  You are done…

You may also, want the following Codes (advanced users) so you can edit, modify to better suit your needs and also better understand it’s full potential.

@media screen and (min-width:1451px) { .detector {background: pink; }}
@media screen and (max-width:1450px) { .detector {background: blue; }}
@media screen and (max-width:1220px) {.detector {background: #f5f5f5; }}
@media screen and (max-width:1020px) { .detector {background: #333; }}
@media screen and (max-width:800px) { .detector{background: red;}}
@media screen and (max-width:650px) {.detector{background: green;}}
@media screen and (max-width:610px) { .detector{background: pink;}}
@media screen and (max-width:500px) { .detector{background: orange;}}
@media screen and (max-width:480px) { .detector{background: yellow;}}
@media screen and (max-width:320px) { .detector{background: purple;}}

The Above css can be used, as a starting point, all the above breaking points are the breaking points we suggest, it does not mean this is what you should do.

But if you really want to add more breaking points or remove any, please use the following javascript and edit to better suit your needs.

if(window['jQuery']=='undefined' ){
var script = document.createElement('script');
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
script.onload = function() {
alert("Help");
$('<div/>',{'class':'detector','id':'detector'}).css({
height: 100,width:100,
position:'absolute',top: 20,left:20
})
.text('jqui.net - Responsive Detector').prependTo('body')
if($.fn.draggable) $('#detector').draggable();
$('<style/>')
.text("@media screen and (min-width:1451px) { .detector {background: pink; }}@media screen and (max-width:1450px) { .detector {background: blue; }}@media screen and (max-width:1220px) {.detector {background: #f5f5f5; }}@media screen and (max-width:1020px) { .detector {background: #333; }}@media screen and (max-width:800px) { .detector{background: red;}}@media screen and (max-width:650px) {.detector{background: green;}}@media screen and (max-width:610px) { .detector{background: pink;}}@media screen and (max-width:500px) { .detector{background: orange;}}@media screen and (max-width:480px) { .detector{background: yellow;}}@media screen and (max-width:320px) { .detector{background: purple;}}")
.prependTo('head')

};
document.getElementsByTagName('head')[0].appendChild(script);
}else{

$(function (){
$('<div/>',{'class':'detector','id':'detector'}).css({
height: 100,width:100,
position:'absolute',top: 20,left:20
}).text('jqui.net - Responsive Detector').prependTo('body')
if($.fn.draggable) $('#detector').draggable();
$('<style/>').text("@media screen and (min-width:1451px) { .detector {background: pink; }}@media screen and (max-width:1450px) { .detector {background: blue; }}@media screen and (max-width:1220px) {.detector {background: #f5f5f5; }}@media screen and (max-width:1020px) { .detector {background: #333; }}@media screen and (max-width:800px) { .detector{background: red;}}@media screen and (max-width:650px) {.detector{background: green;}}@media screen and (max-width:610px) { .detector{background: pink;}}@media screen and (max-width:500px) { .detector{background: orange;}}@media screen and (max-width:480px) { .detector{background: yellow;}}@media screen and (max-width:320px) { .detector{background: purple;}}")
.prependTo('head')
})
}

Hope you like this, share and comment below for improvements and if this has helped you at all, it’s all free

Valtid Caushi