7

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>
Improve this question
4
  • 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
    Commented Jan 27, 2013 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
    Commented Jan 27, 2013 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
    Commented Jan 27, 2013 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
    Commented Jan 27, 2013 at 17:28

3 Answers 3

Reset to default
7

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

Improve this answer
3
  • 1
    Media queries do seem to work in Google Chrome 27 using this option
    – Paul van Schayck
    Commented Jun 9, 2013 at 9:25
  • 1
    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
    Commented Feb 23, 2014 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
    Commented Feb 23, 2014 at 21:14
2

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.

Improve this answer
4
  • That does the trick. Still I would like to have the possibility to zoom out like in Firefox.
    – feklee
    Commented Jan 27, 2013 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
    Commented Apr 16, 2013 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
    Commented Apr 18, 2013 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
    Commented Feb 23, 2014 at 20:46
2

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

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .