What is the best way to test a webpage on higher resolution than your current screen's resolutions?

Question

I'm making a responsive website where I need to test my webpage's css, html, javascript rendering on 2400px resolution while my screen is only 1900px.

Bob · Answer 1 · 2013-12-24T16:51:18.607

If you hit Ctrl+Shift+M in recent versions of Firefox, you'll enter Responsive Design View, which can resize the browser viewport to be larger than the actual screen size. You can also take screenshots and simulate touch events from FF 26 onwards.

^{Click for full size}

You might find it easier to resize after you make the window smaller - you can drag the sizers further in one go. Or just enter a custom preset from the dropdown.

score 4 · Answer 2 · edited Dec 24 '13 at 16:41

4

In Chrome browser:

Press F12. This will open DevTools.
Click a settings icon in the lower right corner. This will open DevTools Settings.
Go to Overrides on the left menu.
Check Enable and Device metrics.
Type in the Screen resolution

I always use it, it's really convenient.

edited Dec 24 '13 at 16:41

Andrea

1,536

answered Dec 24 '13 at 16:18

Arman Bimatov

141

score 1 · Answer 3 · answered Jan 06 '13 at 20:39

1

You can try this website it let you test your web page with any screen resolution it let you choose from a preset resolutions or enter your custom resolution. hope you find these lines helpful.

answered Jan 06 '13 at 20:39

kamalam

71

score 0 · Answer 4 · answered Mar 01 '16 at 17:17

Try the custom resolution settings in the device emulator in Google Chrome. It gives you more control than using the browser's zoom functionality.

Enable the device emulator and check the 'zoom to fit' option.

Manually enter resolutions up to 9999px wide (or drag the edges of the emulated screen. The emulated resolution will be scaled to fit in your own viewport.

You can keep the resolution height low actually as you will be able to scroll down anyway. This way you can keep the inspector open too. A great workflow for web development!

score 0 · Answer 5 · edited Apr 13 '17 at 12:33

0

This question is probably more suited for Webmasters but I'll take a stab at it and suggest ViewLikeUs which

allows you to check out how your website looks in the most popular resolution formats.

edited Apr 13 '17 at 12:33

Community

1

answered Jan 05 '12 at 17:37

CharlieRB

23,021
6
60
107

score 0 · Answer 6 · answered Dec 12 '12 at 16:02

0

Add a custom screen resolution in your video card's control panel.

answered Dec 12 '12 at 16:02

GENiEBEN

121

score 0 · Answer 7 · answered Dec 28 '12 at 09:30

Try out this online resolution tester, it offers variety of different resolutions to test your site with, just enter the url of your site, select a resolution and check it out.

http://www.webestools.com/resolution-tester-screen-size-page-design-test-screen-resolution-website-online-display.html

Hope this helps!!!

score 0 · Answer 8 · answered Dec 28 '12 at 18:03

0

You could try the addon for Chrome: Resolution tester that supports custom resolutions :)

answered Dec 28 '12 at 18:03

Skuli Axelson

133

score 0 · Answer 9 · answered Dec 24 '13 at 17:08

Just change the zoom on your browser, when you zoom out, essentially your window size is reporting a bigger and bigger width to your application.

example jsfiddle here, just click on the button, see the width it's reporting, then zoom out a little and click the same button-- it'll report a larger size.

What is the best way to test a webpage on higher resolution than your current screen's resolutions?

9 Answers9