Skip to content

pixelthing/Desktop-lo-tech-emulator

Repository files navigation

Lo tech desktop background emulator

A desktop background picture that gives outlines of the screensize (and rough viewport size if you remove the OS chrome) of a bunch of popular devices.

This isn't a substitute for testing on real devices - or even IDE environments like Chrome emulator (although be aware that gives you screen size - not browser viewport size - by default), but is meant as a super quick way of testing responsiveness during your dev process. The colours are supposed to be unobtrusive enough to not drive you too crazy, but still be usable:

Snippet of the desktop background

Currently offered in the res of my day-job screens - 1920x1200 and 1280x800. The Fireworks file (.fw.png) is the src file for both (in different pages).

It's not supposed to cover every device in your top 10, but does give major breakpoint/screensizes you'll currently encounter, for instance I know not everyone has a MacBook, but PC laptops have roughly the same LCD panels, but these are the devices I can clearly associate with various sizes. That mental association helps with understanding the DPI differences (eg, the Air11 is a wider in "screen" pixels than the MBP13, but it's denser and smaller, and both are more dense than my desktop monitor). Having said that, it could do with a Samsung or two thrown in.

The background to the background is a tiled pattern I found on a free pattern site - apologies and thanks to the author, whoever you are!

About

A desktop background image for quickly testing responsiveness.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published