10
1
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.
metal gear solid
Posted 2012-01-05T16:54:12.943
Reputation: 7 796
What is the best way to test a webpage on higher resolution than your current screen's resolutions?
Answers
3
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.
Arman Bimatov
Posted 2012-01-05T16:54:12.943
Reputation: 131
2
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.
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.
Bob
Posted 2012-01-05T16:54:12.943
Reputation: 51 526
Is there an api for this option ? For enabling it via js code injected either from website or from inside an addon? – Kamal Reddy – 2014-07-18T15:22:16.920
@KamalReddy I don't think you'd be able to do so from within the content context (website), but it should be possible from the chrome context (addon). Well, in the future anyway. Perhaps you can simulate the Ctrl+Shift+M?
– Bob – 2014-07-18T15:33:36.9931
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.
kamalam
Posted 2012-01-05T16:54:12.943
Reputation: 61
the PHP page that I've added here is the actual page of the tool – kamalam – 2015-11-10T20:28:55.857
Being blocked by our proxy server. Is that a pointer to another site, or is that PHP page the actual page of the tool? – Canadian Luke – 2013-12-24T16:52:41.950
0
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!
bramchi
Posted 2012-01-05T16:54:12.943
Reputation: 1
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.
CharlieRB
Posted 2012-01-05T16:54:12.943
Reputation: 21 303
1it has only 1920 max – metal gear solid – 2012-01-05T17:40:42.057
0
Add a custom screen resolution in your video card's control panel.
GENiEBEN
Posted 2012-01-05T16:54:12.943
Reputation: 111
3Resolutions greater than supported by the screen? Could you provide more details how to configure this and what it looks like? – Daniel Beck – 2012-12-12T17:10:02.037
@DanielBeck This YouTube tutorial link is for nVidia cards. Fairly similar for ATI/AMD.
– GENiEBEN – 2012-12-12T17:54:55.0572@ElGenieben That video explicitly warns at 0:39 that you could damage your display by setting a resolution that's too high. – Nicole Hamilton – 2012-12-12T19:43:58.570
0
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.
Hope this helps!!!
Neville
Posted 2012-01-05T16:54:12.943
Reputation: 134
0
You could try the addon for Chrome: Resolution tester that supports custom resolutions :)
Skuli Axelson
Posted 2012-01-05T16:54:12.943
Reputation: 133
0
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.
Doobeh
Posted 2012-01-05T16:54:12.943
Reputation: 101
possible duplicate of How can you take a screenshot of an entire webpage?
– Ƭᴇcʜιᴇ007 – 2012-01-05T16:57:56.853You do realize that you can resize browser windows beyond your screen resolution on most systems? Just move them halfway out of the screen and then resize the border that's now in the middle of the screen. It's useless for actual use, but will suffice for testing. This screenshot of the complete window was taken on OS X with 1680x150 screen resolution.
– Daniel Beck – 2012-01-05T16:59:10.127@DanielBeck - strange i'm trying same on my Chomre (Windows) but it not stretching beyond my current screen – metal gear solid – 2012-01-05T17:14:20.693
It's really a problem with your OS trying to outsmart you then. Could reproduce with Safari on Windows 7. – Daniel Beck – 2012-01-05T17:17:40.067
Mine is Windows 7 too – metal gear solid – 2012-01-05T17:26:28.303
Some video cards will expand beyond the resolution of the actual monitor, to the screen buffer capability of the video display. In XP I could easily get to that res with the ATI card. Then the screen becomes a scrolling screen, allowing for a full simulation of a 2400 type screen. You could check for that in windows own resolution settings, or in the video cards own settings utility. Same thing isnt working out too well in windows 7 :-( Gotta be a way to fix that. – Psycogeek – 2012-01-05T17:31:32.153
Since we already are suggesting web sites for this, does it work with http://resizemybrowser.com/ ?
– Daniel Beck – 2012-01-05T17:48:35.250@DanielBeck - no it doesn't go beyond my screen even i created a size of 2500px – metal gear solid – 2012-01-05T17:53:09.540