Media Query Summarizer
This script tests a series of media queries on your device using matchMedia(), then prints the results in a table. It's a handy way to see which media queries and values match on a device, and since it tests a variety of values for each query on the device, it can show the minimum and maximum values for the query that match, e.g. the exact values that match for (min-width: ...). For ranges printed in the Matched Values column, both values are inclusive.
Note: these media queries are only calculated once on page load. There are no event listeners that automatically recalculate the media queries after events such as resizing the window or changing the zoom level.
One of the media features tested is @media (scripting: none). If this matches, then JavaScript is disabled and the table can't be populated, so you'll never see that particular match in the table.
Media Query | Matched Value(s) | Values Tested |
---|