移动端页面内容显示过小，如何用CSS结合响应式修复？

问题核心是你没加viewport元标签，移动端浏览器默认会按桌面端宽度（比如980px）渲染页面，再整体缩放适配屏幕，导致元素看起来特别小——这也是你之前用div包裹调整宽度没用的原因。

具体修复方案： #

1. 添加viewport元标签：在<head>里插入这行代码，让浏览器用设备实际宽度渲染页面：

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

2. 优化元素响应式宽度：
   • 把textarea的固定cols属性换成CSS控制宽度，避免固定列数的适配问题；
   • 给内容容器设置灵活的宽度规则，桌面端保持1/3左右宽度，移动端占满屏幕。

修改后的完整代码： #

<html lang="en-us">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RegEx Profanity Filter</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
        .content-container {
            max-width: 400px; /* 桌面端对应屏幕1/3宽度，可按需调整 */
            width: 100%;
            margin: 0 auto;
            padding: 0 15px;
        }
        textarea {
            width: 100%;
            box-sizing: border-box; /* 避免内边距撑破容器宽度 */
        }
        input[type="button"] {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="content-container">
        <p>Insert profanity laced rant here:</p>
        <textarea rows="4"></textarea>
        <input type="button" value="Click me" onclick="check()">
        <div id="filtered"></div>
    </div>
</body>
</html>

补充说明： #

• viewport标签是移动端适配的基础，没有它所有响应式CSS都会失效；
• box-sizing: border-box确保textarea的内边距、边框不会超出容器宽度；
• 容器的max-width限制桌面端最大宽度，width:100%保证移动端占满屏幕，margin:0 auto让内容居中显示。

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