BreakpointBuddy/index.html at main · adashrod/BreakpointBuddy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
    <head>
        <title>Breakpoint Buddy - Media Query Explorer for Responsive Design</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <meta name="description" content="Breakpoint Buddy is a Media Query Explorer that lets you test and view CSS breakpoints in real time for any device or screen size.">
        <script src="queryPrinter.js"></script>
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "WebApplication",
                "name": "Breakpoint Buddy",
                "description": "A Media Query Explorer that lets you test and view CSS breakpoints in real time for any device or screen size.",
                "applicationCategory": "Developer Tools"
            }
        </script>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="main">
            <h1 class="title">Media Query Explorer & Responsive Design Helper</h1>
            <p class="documentation">
                Welcome to Breakpoint Buddy, a fast and easy Media Query Explorer that helps you test responsive breakpoints and CSS media queries right in your browser.
            </p>
            <p class="documentation">
                This script tests a series of media queries on your device using
                <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia">
                    <span class="code">matchMedia()</span></a>,
                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
                <span class="code">(min-width: ...)</span>. For ranges printed in the <span class="reference">Matched
                Values</span> column, both values are inclusive.
            </p>
            <p class="documentation">
                Note: Media queries are tested every second. If you resize the window or change the zoom level, the media
                queries will be recalculated.
            </p>
            <p class="documentation">
                One of the media features tested is <span class="code">@media (scripting: none)</span>. 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.
            </p>
            <table id="query-list">
                <thead>
                    <tr>
                        <th>Media Query</th>
                        <th>Matched Value(s)</th>
                        <th>Values Tested</th>
                    </tr>
                </thead>
                <tbody id="query-list-table"></tbody>
            </table>
            <div class="copyright">&copy; 2025 Aaron Rodriguez</div>
        </div>
    </body>
</html>