Screen ruler with 5px step

for quick mobile / desktop prototyping and resolution testing

WHAT TO DO WITH THIS?
Drag-resize your browser window to see how your HTML looks in different resolution. The ruler simply shows you what's the size of the window.

WHAT'S WITH RED AND GREEN RECTANGLES?

  1. Red rectangles stand for the most common mobile device resolutions.
  2. Green rectangles stand for the most common desktop and laptop resolutions.
  3. If I missed something, you can write to screenruler @ prowebdesign.ro and suggest a resolution to include.

HOW TO USE

  1. In browser tab:
  2. Directly in the document you're working on:
    • Paste this piece of CSS somewhere in the <head> section of your HTML document.
      <style type="text/css">
      <!--
      body {
      	background:url(http://www.prowebdesign.ro/screen-ruler/screeen-ruler.png) top left no-repeat;}
      -->
      </style>
    • Now you have a semi-transparent background ruler.
    • If you have already assigned a background image to the BODY element, the ruler may interfere with it - it's OK.
    • Opent your HTML document in a browser.
    • Resize, test.
    • When done, delete inserted CSS piece.

WHY TO USE, if there are so many cool JS resizers and IFRAME tools out there?

  1. Gives you total control: resize to ANY resolution you want, not just presets.
  2. You can test the document you're coding locally on your computer, without even having it online.
  3. Easy-peasy :)

DISCLAMER
As you probably know, there's no way to accurately test site for mobile environment on desktops or laptops. The only way to test accurately is to get phone/tablet you'r testing for. But since you can go broke buying so many gadgets, desktop testing is the next best thing:)