jQuery.Resolution

is a simple tool to test different resolutions in a vanilla browser. It supports testing high device-pixel-ratio devices (e.g. retina iPhone).

Usage

Apply it on the jQuery element, which represents the screen:


				$("#screen").resolution(true,
				
 
				//...

It will display a floating bar on the right bottom part of the document, which is used to switch resolutions. If the first parameter is false, the bar will not appear (this option is useful for production code).

The second parameter is an array of items. If item array has only one element, it is a heder:


				 
				[
				
   
				[ "smartphone" ],
				
   
				//...

Otherwise, it is a resolution definition:


				   
				[ "standard",320,480,1,true, 2 ],
				
   
				[ "modern",800,480,1,true ],
				
   
				//...

Fields are: name, width, height (can be swapped), device-pixel-ratio (1 for normal, 2 for retina), rotate and initial mark. If the rotate field is true, the item will generate two buttons: portrait and landscape. The initial mark should be used to select initial resolution and orientation, 1 for portrait, 2 for landscape. If none of the resolution has marked with it, full browser window size will apply.

The third parameter is the callback:


				],function(width,height,dpr,test) {
				
 
					// put your code here
				

				}

It will be called by 4 reasons: at startup, on window resize, on orientation change (so you should use this callback instead of $(window).resize()), and (if the bar is turned on) selecting a resolution on the bar. The last case callback comes with test argument set to true.

Note, that requested width may be decreased by the size of the scrollbar.

Also, there is an optional fourth parameter, which defines attenuation time (ms) for window-resize detection, avoid firing callback too often which leads repainting the app on every little mouse move during window resizing. Default value is 200 ms.

Example

Full example (used on this page):


				$("#screen").resolution(true,[
					
 					
					[ "smartphone" ],
					
 					
					[ "cheap",320,240,1,true ],
					
 					
					[ "standard",320,480,1,true ],
					
 					
					[ "modern",800,480,1,true, 2 ], // init: landscape
					
 					
					[ "mot/sony",854,480,1,true ],
					
 					
					[ "premium",960,540,1,true ],
					
 					
					[ "retina" ],
					
 					
					[ "iphone",960,640,2,true ],
					
 					
					[ "iphone5",1136,640,2,true ],
					
 					
					[ "tablet" ],
					
 					
					[ "ipad",1024,768,1,true ],
					
 					
					[ "retina",2048,1536,2,true ],
					
 					
					[ "netbook" ],
					
 					
					[ "cheap",1024,576,1,false ],
					
 					
					[ "value",1024,600,1,false ],
					
 					
					[ "notebook" ],
					
 					
					[ "wide",1366,768,1,false ],
					
 					
					[ "notebook",1280,800,1,false ],
					
					
				],function(width,height,dpr,test) {
					
									
					
 
					showNotification( 
						
  
						"width=" + width + 
						
  
						"height=" + height + 
						
  
						"dpr=" + dpr + 
						
  
						"test=" + test
						
 
					);
					
					
					
										
				});

Styling

The floating bar is a table. The resolution style class is added to all nodes. The resolution-selected class is used to mark current selected resolution. The resolution1 and resolution2 is used to set different styles to different DPRs.