如何让网页内容适配手机宽度但不放大至笔记本等大屏设备？

你的问题核心是缺少移动端视口配置，加上旧布局方式导致手机端显示异常。以下是具体修改方案：

关键问题点 #

• 未添加viewport元标签：手机浏览器会默认按桌面宽度缩放页面，导致内容被压缩到屏幕中间，文字显示极小
• 使用了过时的<center>标签：虽能实现居中，但无法让内容在移动端自适应屏幕宽度

修改步骤 #

1. 添加视口元标签：在<head>中加入这行代码，让页面宽度匹配设备屏幕，同时禁止用户缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

2. 替换<center>为CSS居中：移除<center>标签，给内容容器设置最大宽度（比如1200px），通过margin: 0 auto实现大屏居中，移动端自动铺满屏幕
3. 优化字体可读性：将固定字体大小改为相对单位，再通过媒体查询给移动端放大字体，提升阅读体验

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>fill-er-up</title>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <!-- 新增移动端视口配置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <STYLE>
        html, body {margin: 0; padding: 0;}
        body {
            background-color: #FFFFFF ;
            font-family: Helvetica, sans-serif ;
            color: #000000 ;
            font-size: 16px;
        }
        /* 内容容器：大屏居中，移动端铺满 */
        .content-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px; /* 移动端左右留边，避免内容贴满屏幕 */
        }
        /* 移动端字体放大优化 */
        @media (max-width: 768px) {
            body {
                font-size: 18px;
            }
            h1 {
                font-size: 2rem;
            }
            h2 {
                font-size: 1.5rem;
            }
        }
    </STYLE>
</head>
<body>
<div class="content-wrapper">
    <table style="border: none; padding: 0; margin: 0 auto;">
        <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>
    <p>a minor word or two</p>
    <h2 style="color: red">A major proclamation</h2>
    <p>&hyphen; more info &hyphen;</p>
    <p>&hyphen; and another thing &hyphen;</p>
    <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>
</div>
</body>
</html>

补充说明 #

• 视口标签是移动端适配的核心，没有它手机浏览器会强制按桌面模式渲染页面
• .content-wrapper的max-width可根据需求调整，确保大屏内容不会过宽影响阅读
• 媒体查询让移动端字体更大，提升小屏设备的可读性
• 用<p>标签替代<br>换行，让页面结构更语义化，也便于后续样式调整

内容的提问来源于stack exchange，提问作者Hermitian