How to expand content to width of cellphone, but not laptops, etc.?

I'm accustom to writing raw html and perl but have been out of the loop for a dozen years.

Like many people, I'd like my content to magnify to the width of a cellphone but not on larger devices where the example below works fine. How is this done?

<!DOCTYPE html>
<html><head>
    <title>fill-er-up</title>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <STYLE>
        html, body {margin: 0}
        body {
            background-color: #FFFFFF ;
            font-family: Helvetica, sans-serif ;
            color: #000000 ;
            font-size: large
        }
    </STYLE>
</head>
<body>
<center>
    <table style="border: none; padding: 0">
        <tr><td><svg width="48" height="48">
            <rect width="48" height="48" style="fill:#EAEA00"/></svg></td>
            <td><h1>&nbsp;test.html</h1></td>
        </tr>
    </table>
    a minor word or two
    <h2 style="color: red">A major proclamation</h2>
    &hyphen; more info &hyphen;<br>
    &hyphen; and another thing &hyphen;<br>
    &nbsp;<br>
    <form action="">
        <b>SELECT</b><br>
        &nbsp;<br>
        <table style="border: none; padding: 0">
            <tr><td>
                <input type="radio" id="A" name="R" value="A" checked>
                <label for="A">This way</label><br>
            </td></tr>
            <tr><td>
                <input type="radio" id="B" name="R" value="B">
                <label for="B">No that way</label><br>
            </td></tr>
        </table><br>
        <input type="submit" value="Submit">
    </form>
</center>
</body></html>

When tried on a few cellphones I tried, the text of the above example is tiny and only occupies the center 2/8 of the width as shown here:

screenshot

Solution

You can use: 1.<meta name="viewport" content="width=device-width, initial-scale=1.0" "close with greater than symbol" 2. min width or max width 3. width in % or px and margin = auto