3 ways to test website’s Responsive design

image

Responsive design is more and more popular today. However, is there any way to test a website’s responsive design easily?

Yes, today I will show you 3 ways to test website’s Responsive design.

1. Use Viewport resizer

Viewport resizer is a Responsive design bookmarklet. It’s so easy to use.

Click or drag the button in Viewport resizer to broswer’s bookmark is ok.

image

Viewport resizer’s features:

    1. Full customization
    2. Add and customize sizes on the fly
    3. Manually orientation toggle by click (portrait | landscape)
    4. Automatically device window orientation in “Auto Size” mode (portrait | landscape)
    5. Media query support
    6. Adapt meta viewport tag from current page
    7. Manually page reload
    8. Remove toolbar and land on current page
    9. Viewport information (size, aspect ratio, orientation and user agent)
    10. Vector-based
    11. Touch-friendly

2. Use Chrome

In Chrome, there is a default resize function, how to use it? Following:

1. In Chrome, click ‘F12’;

2. Click following button:

image

3. then click ‘overrides’:

image

4. You can change ‘user agent’ to test a website’s responsive design:

image

3. Use Firefox

There is also a default resize function in Firefox.

Click ‘Ctrl+Shift+M’ in Firefox, then you can see,

image

Choose which you want, you can test a website’s responsive design.

Hope it helps.

× -