Simulate high resolution screen in Chrome?

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>

feklee

Posted 2013-01-27T11:23:07.277

Reputation: 1 194

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 – 2013-01-27T16:47:48.727

@MarcusChan, yes I know that I can do that. But I want a solution where I can stay at XGA resolution, because I don't like a scrolling screen. – feklee – 2013-01-27T17:11:57.073

Hmm. There's a Chrome extension (https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal) that can change your browser wondow to be bigger than your screen, but that's not optimal either...

– Marcus Chan – 2013-01-27T17:16:10.027

@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 – 2013-01-27T17:28:53.137

Answers

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

feklee

Posted 2013-01-27T11:23:07.277

Reputation: 1 194

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

feklee

Posted 2013-01-27T11:23:07.277

Reputation: 1 194

1Media queries do seem to work in Google Chrome 27 using this option – Paul van Schayck – 2013-06-09T09:25:03.120

1NOTE: "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 – 2014-02-23T21:03:06.540

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. – ToolmakerSteve – 2014-02-23T21:14:27.440

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.

Marcus Chan

Posted 2013-01-27T11:23:07.277

Reputation: 1 643

That does the trick. Still I would like to have the possibility to zoom out like in Firefox. – feklee – 2013-01-27T17:34:11.677

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. – Tony Bogdanov – 2013-04-16T15:17:53.767

@Tony Have a look at the example code that I just added to my question. window.innerWidth does change when I zoom out, but the media query only fires when I change the physical size of the window. Interestingly, the plugin recommended by @MarcusChan does not work for me anymore. – feklee – 2013-04-18T17:47:40.913

@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 – 2014-02-23T20:46:48.313