Simulate high resolution screen in Chrome?

windows-xp firefox google-chrome browser html

16,332

Solution 1

With Chrome 28, when zooming out sufficiently, eventually the media query for a larger screen fires. Problem solved.

Solution 2

For completeness, I want to mention that using Chrome's developer tools, device metrics can be overridden by specifying an exact screen resolution. In the screen shot, an additional option is selected: Fit in window

At least with Chrome 26, however, changing device metrics does not affect media queries (anymore?). So, as of this writing, this is not a solution.

Screen shot

Solution 3

One solution is a chrome extension (https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal) that can change your browser window resolution to be larger than your screen resolution.

16,332

feklee

Updated on September 18, 2022

Comments

feklee over 1 year
How do I display a wide-screen wide web site on an XGA screen (1024px) in Chrome 26 on Windows XP. Of course, I can zoom out in Chrome, but then still the < 1220px media query fires , bummer! So I do not get the >= 1220px version of the web site.

What can I do?

With Firefox it works: I zoom out, and then the >= 1220px media query fires, great! But it's not Chrome, on which I want to test the web site as well.

Source code for test web page:
```
<!DOCTYPE html>

<html>
  <head>
    <meta charset=utf-8>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" media="screen" href="index.css">
    <style>
      p {
          color: black;
      }

      @media (min-width: 1220px) {
          p {
              color: red;
          }
      }
    </style>
    <script>
      window.addEventListener("resize", function () {
          console.log(window.innerWidth);
      });
    </script>
  </head>

  <body>
    <p>Turns red for window width >= 1220px</p>
  </body>
</html>
```
- Marcus Chan about 11 years
  
  What kind of graphics card do you have? Depending on that, you could add a custom screen resolution that's higher than 1220 pixels wide (not the most elegant solution, I know, but it can be useful for testing a lot of things)
- Marcus Chan about 11 years
  
  Hmm. There's a Chrome extension (chrome.google.com/webstore/detail/resolution-test/…) that can change your browser wondow to be bigger than your screen, but that's not optimal either...
- feklee about 11 years
  
  @MarcusChan: Thanks, that extension is better than nothing! Write it as an answer, and I will mark it as accepted, until someone comes up with a nicer solution (zoom).
feklee about 11 years

That does the trick. Still I would like to have the possibility to zoom out like in Firefox.
Tony Bogdanov about 11 years

that can change your browser window resolution to be larger than your screen resolution - wrong, javascript cannot change windows size larger than the screen if this is not supported by the OS (my case), thus no extension can do it.
Paul van Schayck almost 11 years

Media queries do seem to work in Google Chrome 27 using this option
ToolmakerSteve about 10 years

@MarcusChan - on my PC, that chrome extension does not help: I added a larger than screen size, and Resolution Test says that it has set the window to that size, but the result is still no larger than the screen (Windows 7 64-bit; NVidia GTX 680 w 4 GB).
ToolmakerSteve about 10 years

NOTE: "Overrides" tab has been renamed "Emulation". Left-hand menu, click "Screen". Check "Emulate screen", and enter desired resolution. Uncheck "Shrink to fit" (unless you want to see the larger window shrunk into current window size, to see the overall result). UNDOCK the developer settings, so it is a separate window, not using some of the window height.
ToolmakerSteve about 10 years

Downside of unchecking "Shrink to fit" is that there doesn't seem to be any way to scroll around within the larger window; it just shows the middle of the over-sized browser window.