如何让Materialize CSS表单在手机端实现类APP全屏响应效果

我用Materialize CSS开发了一个关联Google文档的表单，但在手机浏览器里没法达到预期的响应式全屏效果，希望它能像APP打开时一样全屏显示。可以查看附件截图了解手机端当前显示状态。

以下是我的代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <!--Import Google Icon Font--> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!--Import materialize.css--> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> 
    <!--Let browser know website is optimized for mobile--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title> creat PDF </title> 
</head> 
<body> 
    <div class="container"> 
        <div class="row"> 
            <div class="input-field col s6"> 
                <input placeholder="Your name" id="name" type="text" class="validate"> 
                <label class="active" for="name">First Name</label> 
            </div> 
        </div> 
        <div class="row"> 
            <div class="input-field col s6"> 
                <input placeholder="Your name" id="id" type="text" class="validate"> 
                <label class="active" for="id">Your Id</label> 
            </div> 
        </div> 
        <div class="row"> 
            <div class="input-field col s6"> 
                <input placeholder="Your name" id="dep" type="text" class="validate"> 
                <label class="active" for="dep">Your Department</label> 
            </div> 
        </div> 
        <button id="btn" onclick="waitingMessage()" class="btn waves-effect waves-light" type="submit" name="action">Submit 
            <i class="material-icons right">send</i> 
        </button> 
        <div id="msg"> 
        <div> 
    </div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 
    <?!=include('js');?> 
</body> 
</html>

解决方案：实现移动端全屏显示 #

问题主要出在这几个地方：

1. 默认的.container类在Materialize中有固定的左右内边距，会限制表单的宽度，无法占满屏幕。
2. 移动端viewport标签缺少适配刘海屏的配置，导致部分设备顶部/底部有留白。
3. 表单的列设置为col s6，在移动端只占一半宽度，视觉上不够贴合全屏APP的体验。

下面是修改后的完整代码，我会标注关键修改点：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <!--Import Google Icon Font--> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!--Import materialize.css--> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> 
    <!--Let browser know website is optimized for mobile - 新增viewport-fit=cover适配刘海屏，确保全屏--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> 
    <style>
        /* 移除body默认边距，设置全屏基础样式 */
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            min-height: 100vh;
            box-sizing: border-box;
        }
        /* 自定义全屏容器，替代原有的container */
        .full-screen-container {
            padding: 1rem; /* 保留适度内边距，避免内容贴边 */
            width: 100%;
            min-height: 100vh;
        }
    </style>
    <title> creat PDF </title> 
</head> 
<body> 
    <!-- 替换.container为自定义的全屏容器 -->
    <div class="full-screen-container"> 
        <div class="row"> 
            <!-- 将col s6改为col s12，在移动端占满宽度 -->
            <div class="input-field col s12"> 
                <input placeholder="Your name" id="name" type="text" class="validate"> 
                <label class="active" for="name">First Name</label> 
            </div> 
        </div> 
        <div class="row"> 
            <div class="input-field col s12"> 
                <input placeholder="Your name" id="id" type="text" class="validate"> 
                <label class="active" for="id">Your Id</label> 
            </div> 
        </div> 
        <div class="row"> 
            <div class="input-field col s12"> 
                <input placeholder="Your name" id="dep" type="text" class="validate"> 
                <label class="active" for="dep">Your Department</label> 
            </div> 
        </div> 
        <button id="btn" onclick="waitingMessage()" class="btn waves-effect waves-light" type="submit" name="action">Submit 
            <i class="material-icons right">send</i> 
        </button> 
        <div id="msg"></div> 
    </div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 
    <?!=include('js');?> 
</body> 
</html>

修改说明： #

• viewport标签：添加viewport-fit=cover，让页面可以延伸到设备的刘海、圆角区域，实现真正的全屏效果。
• 全屏容器：替换了Materialize的.container为自定义的.full-screen-container，移除固定宽度限制，同时保留适度内边距提升用户体验。
• 表单列调整：把col s6改成col s12，让每个输入框在移动端占满屏幕宽度，更符合APP的交互习惯。
• body样式重置：移除默认的margin和padding，确保页面没有多余的留白。

这样修改后，你的表单在手机浏览器里就会像APP一样全屏显示了！

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