How to simulate a higher resolution screen to check the behavior of a website?

21

Is there any way to simulate a higher resolution screen to see how a site behaves? I currently use 1440x900 and need to test the interface at higher resolutions.

    
asked by anonymous 14.03.2014 / 02:10

6 answers

19

In Firefox Firefox and Firefox options there are options in development tools that are already native to browsers to work with specific resolutions. Below are the tutorials on how to activate such tools.

Chrome

In Google Chrome there is an Emulator option in DevTools, where you can simulate various features in your browser.

To activate, open your DevTools, (press F12 , or right click and inspect item).

In the upper right corner, you have a gear symbol ,clickit,andintheGeneralmenu,theAppearancetopicactivatesthefirstoption" Show 'Emulation' view in console ".

Closetheoptions,atthetopleftbuttonofthegear,whichlookslikealist,clickit.

In the bottom menu that appears select "Emulation" inthe"Screen" topic you can configure the data of your desired resolution and pixel ratio so that if your resolution is smaller the viewing comfort is comfortable while having more pixels than your monitor.

DemonstrationofthedesiredresolutioninabrowserrunninginFullHDnativeresolution,butemulating1440x900,butchangingpixeldensitycanemulategreaterresolutionsthantheoneyouareusing:

This feature is designed to work with mobile devices in official you can get more details.

Firefox

It is also possible to emulate in firefox, open the code inspector and activate the "Responsive Design" icon intheupperrightside.

Addthedesiredresolutionintheupperleftmenuthatwillappear.Theresultcanbeseenintheimagebelow:

    
14.03.2014 / 04:58
3

This has some solutions depending on the machine you are using.

  • For example, nVidia video drivers allow you to add custom resolutions that are larger than your monitor's, giving you a horizontal and vertical scroll across the desktop.

  • Another possibility is to attach an additional monitor to the video card (this works for multiple board and manufacturer types) and extend the desktop in both horizontally by widening the browser screen.

The advantage of using these two first features is that simulating only within the browser sometimes does not correspond to the reality of a really large workspace.

  • Another possibility is to zoom in on browsers. For example, the - key in Opera, or ctrl - in Chrome, Iron, and the like zoom out the screen, evaluation as well.

  • Other than that, there are sites like View Like Us , which allow you to simulate different resolutions than your.

Probably a good evaluation can mix more than one of these techniques.

    
14.03.2014 / 03:44
1

You can use the Firefox Adaptive Design Mode (Ctrl + shift + M) feature in the Web Developer menu, then you can only configure the dimensions of each element using CSS media.

    
14.03.2014 / 03:38
1

Try Screen Fly , this site allows you to test a site hosted in several resolutions, the cool one is that it has the resolutions of the handsets. This ends up making it easier, so you know in which devices your site is running perfect.

    
14.03.2014 / 04:12
1

Because some answers are a bit dated, as the browser is updated frequently, I'm going to contribute an updated answer about the latest versions of Chrome. You can simulate resolutions greater than 4K with ease

First access the Chrome Developer Tools by pressing F12 or Ctrl + Shift + i . After that, locate the button as below, or hit Ctrl + Shift + m

Thisisdoneatthetop,justlookattheredsquares,youcanputtheresolutionyouwant,eithersimulatingsmallerorlargerscreens.

Hereisatestontheglobe'swebsitewith50%higherresolutionthanmyscreen.

YoucangobyclickingontheBLUE,GREEN,orORANGEbarstosimulatebreakpointsinmin-widthandmax-width

Nowviewingin4K

OBS1:InthissamebarwhereyouchoosetheresolutionyoucanalsotestthescreenwithvaluesotherthanPixelDensity(DPR:1x,2xand3x).Inadditiontobeingableto"rotate" the screen between portrait and landscape on the last button of the bar.

OBS2: When you zoom in, you are actually decreasing the screen width and width, so if your screen has% width% and you increases zoom to 150% your screen will actually be in 1000px width.

    
10.04.2018 / 22:28
0

You can create a page with a iframe by calling the page you want to test.

Put this iframe to width and height you need.

Maybe you have better ways, but then you can test. Maybe working on the zoom of the browser you get a good test used iframe .

    
14.03.2014 / 03:32