Tell me more ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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>
share|improve this question
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 Jan 27 at 16:47
@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 Jan 27 at 17:11
1  
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... – Marcus Chan Jan 27 at 17:16
@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 Jan 27 at 17:28

2 Answers

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

share|improve this answer

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.

share|improve this answer
That does the trick. Still I would like to have the possibility to zoom out like in Firefox. – feklee Jan 27 at 17:34
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 Apr 16 at 15:17
@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 Apr 18 at 17:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.