Viewport is an iPad application that helps you to test, debug and present your responsive website designs. Choose from the supplied list of screen resolutions, or create your own custom sizes that you always test against. Change User Agent strings and get under the hood via the Page Inspector.

The presentation mode also allows you to easily display a responsive design in action when presenting from your iPad. Perfect for your next client presentation.


Responsive Design Testing

Quickly change your viewport dimensions with the viewport resizer to test your responsive design. Create new dimensions at the sizes that you require or edit the existing ones accordingly.

In addition to specifying the width and height of the viewport you can also specify for top and bottom simulated browser chrome heights and enable them via the settings area.

Select your viewport dimensions

Colour Picker

Pick a colour

Select a colours from the page that you are viewing with the in-built colour picker tool. Drag the cross-hairs to select the desired colour and the hex and RGB values are instantly displayed in the toolbar below.

Once your happy with the colour that you have selected you can copy the Hex or RGB values to the clipboard.


View Source and HTTP Headers

View the HTML source code and HTP response headers for any page quickly with the page inspector.

Source Code Viewer

Page Inspector Viewing Files

Find out file information

The inspector allows you to retrive information about files that are used by your page such as CSS, JavaScript and image files. View file sizes are calculated and missing files are dislayed in red.

Saving an image that is linked via CSS or copying the source of a JavaScript or CSS file is easy. Simply select the file from the inspector. Viewport alloows you to copy text to the clipboard and sav images to your photo library.