Take the 2-minute tour ×
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 '13 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 '13 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 '13 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 '13 at 17:28

3 Answers 3

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
1  
Media queries do seem to work in Google Chrome 27 using this option –  Paul van Schayck Jun 9 '13 at 9:25
    
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 Feb 23 at 21:03
    
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 Feb 23 at 21:14

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 '13 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 Bogdanov Apr 16 '13 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 '13 at 17:47
    
@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 Feb 23 at 20:46
up vote 1 down vote accepted

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

share|improve this answer

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.