Here is a bit of CSS that has a simple media query.
http://codepen.io/anon/pen/nuxaw
When I shrink the page so that the view port is less than 320, the box turns green. Now if I follow these steps, the browser will be maximized, but the CSS will still be in the state defined by the media query at 320px.
1. With the page opened in the first tab, and the browser sized so that the < 320px media query is enabled,
2. Open a new tab,
3. Browse to a website, like facebook.com.
4. Maximize the browser.
5. Take an extended browsing session away from the first tab. Do not reactivate the first tab for a few minutes.
6. Activate the first tab with the window maximized.
7. At this point, the view port should be full screen, but the element should still be the green block.
This means the <320 media query is still applied. If you open the debugger though, you'll see that the CSS applied though is the normal CSS. Is this a bug with Chrome?
http://imgur.com/a/TIAAi
Here’s an album on imgur that shows the sequence.
1. Opened, maximized.
2. Reduced viewport, media query enabled.
3. Maximized, still using media query.
4. Looking at the CSS, it says that the dimensions are 300×200, but the UI shows 100×100. Something is broken.
