强制 div 在移动设备上占据整个屏幕？ CSS、HTML

Question

我有一张 224w x 400h 的图片。漂浮在该图像上的是一个简单的表格。

我的目标是让 div 在移动设备上查看时，包含该图像 + 叠加形式的内容占据整个屏幕。我尝试了各种组合，使用媒体 headers、视口元和我从类似的堆栈溢出问题中拼凑而成的大量 css。我目前不知道下一步该做什么。

我也尝试过至少将 img+form 居中，但我放弃了它，因为它相对于移动设备屏幕尺寸不居中。（而是将 div 推离屏幕并创建水平滚动条，就好像它认为移动设备屏幕非常宽一样。）

如何进行更改，以便移动设备用我指定的 div 填满屏幕？（或者至少，将 fullsrceen div class 放在移动设备的较小屏幕上。）非常感谢任何帮助！

当前html

<!DOCTYPE html>
<html>
<head>
<title>Reg</title>
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

<link href="Form.css" rel="stylesheet">
</head>
<body>

<div class="fullscreen" id="fullscreen">

    <div style="position:relative">    
<img src="fbg.png" alt="" />
        <div style="position:absolute;left:0;top:0;">


            <div id"=main">
<form method="post" action="SMA_Send2.php">
<label for="form">
First Name: <input type="text" maxlength="20" name="Fname" required><br />
Last Name: <input type="text" maxlength="36" name="Lname" required><br />
Student ID: <input type="number" maxlength="4" name="Sid" required><br />
Email: <input type="email" maxlength="36" name="Email" required placeholder="Enter a valid email address"><br />
Device Type:<br />
<select name="Dtype">
<option value="iPad">iPad</option>
<option value="iPhone">iPhone</option>
<option value="AndroidTablet">Android Tablet</option>
<option value="AndroidPhone">Android Phone</option></select><br />
Mac Address: <input type="text" maxlength="17" name="Mac" pattern="([0-9A-F]{2}[:-]){5}([0-9A-F]{2})" title="Use Format: 1A:B2:3C:D4:5E:6F" required placeholder="Ex: 1A:B2:3C:D4:5E:6F"><br />
<br />
<input type="submit" value="submit" name="submit">
</label>
</form>
            </div>

        </div>
    </div>
</div>

</body>
</html>

当前 css

#fullscreen {
        height: 100vh;
        width: 100vw;
        position:fixed;
        top:0;
        left:0;
    }
@media screen and (orientation:portrait) { height: 100vh;
            width: 100vw; }
@media screen and (orientation:landscape) {height: 100vh;
            width: 100vw; }

label {
    display: inline-block;
    position: relative;
    float: left;
    text-align: left;
    margin-right: 20px;
    width: 190px;
    padding: 5px;
}

input, textarea { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    font: normal 13px/100% Verdana, Tahoma, sans-serif; 
    width: 190px; 
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    } 

input:hover, textarea:hover, 
input:focus, textarea:focus { 
    border-color: #C9C9C9; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
    } 

select { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    height: 36px;
    width: 210px;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    }    



.form label { 
    margin-left: 10px; 
    color: #999999; 
    } 

.submit input { 
    width: 210px; 
    padding: 9px 15px;
    background: #617798; 
    border: 1; 
    font-size: 14px; 
    color: #FFFFFF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    }

input[type=submit] {
  border: 1; /*rewriting standard style, it is necessary to be able to change the size*/
  height: 35px;
  width: 210px;
}


input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
-moz-appearance: textfield;
}

Answer 1

你的代码有点乱，难懂，vh和vw是什么？

无论如何试试这个，我已经稍微修改了代码并删除了不必要的东西。我为移动屏幕添加了一个 css ，告诉它使表单的所有输入都占屏幕宽度的 100%。

<div style="position:relative">    
<img src="fbg.png" alt="" />

<div id="main">
<div id="myForm">

<form method="post" action="SMA_Send2.php">
First Name:<br />
<input type="text" maxlength="20" name="Fname" required>
<br />
Last Name:<br />
<input type="text" maxlength="36" name="Lname" required><br />
Student ID:<br />
<input type="number" maxlength="4" name="Sid" required><br />
Email:<br />
<input type="email" maxlength="36" name="Email" placeholder="Enter a valid email address" required><br />
Device Type:<br />
<select name="Dtype">
<option value="iPad">iPad</option>
<option value="iPhone">iPhone</option>
<option value="AndroidTablet">Android Tablet</option>
<option value="AndroidPhone">Android Phone</option></select><br />
Mac Address:<br />
 <input type="text" maxlength="17" name="Mac" pattern="([0-9A-F]{2}[:-]){5}([0-9A-F]{2})" title="Use Format: 1A:B2:3C:D4:5E:6F" required placeholder="Ex: 1A:B2:3C:D4:5E:6F">
<br /><br />
<input type="submit" value="submit" name="submit">
</form>
</div></div></div>

CSS:

#myForm {
position:absolute;
left:0;
top:0
}

input, textarea { 
        padding: 9px; 
        margin: 5px 0;
        border: solid 1px #E5E5E5; 
        outline: 0; 
        font: normal 13px/100% Verdana, Tahoma, sans-serif; 
        width: 190px; 
        background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
        background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
        box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
        -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
        -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
        } 

    input:hover, textarea:hover, 
    input:focus, textarea:focus { 
        border-color: #C9C9C9; 
        -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
        } 

    select { 
        padding: 9px; 
        margin: 5px 0;
        border: solid 1px #E5E5E5; 
        outline: 0; 
        height: 36px;
        width: 210px;
        font: normal 13px/100% Verdana, Tahoma, sans-serif;
        background: -webkit-gradient(linear, left top, left 25, from(#FFF), color-stop(4%, #EEE), to(#FFF)); 
        background: -moz-linear-gradient(top, #FFF, #EEE 1px, #FFF 25px); 
        box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
        -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
        -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
        }    

    submit { 
        width: 210px; 
        padding: 9px 15px;
        background: #617798; 
        border: 1; 
        font-size: 14px; 
        color: #FFF; 
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px; 
    }

    input[type=submit] {
      border: 1; /*rewriting standard style, it is necessary to be able to change the size*/
      height: 35px;
      width: 210px;
    }


    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
    }

    input[type=number] {
    -moz-appearance: textfield;
    }

    @media screen and (max-device-width: 480px){
    input, select {width:100%}
    }

Answer 2

媒体查询需要包含规则，因为您拥有它，媒体查询中的代码无效，并且不会使用选择器定位任何内容。

您针对移动设备的方式绝不适合媒体查询，因为您通常使用视口宽度来这样做：

@media (max-width: 600px) {
    /*Some rule(s)*/
}

因此，您不是针对移动设备，而是针对窄 screens/viewports。

也就是说，您需要在媒体查询中插入一个（或一些规则）规则才能执行任何操作：

@media (max-width: 600px) {
    #fullscreen {
        /*Some declaration(s)*/
    }
}

现在...也就是说，您的 #fullscreen 规则已经使 <div /> 元素满 width/height，请参见此处：http://jsfiddle.net/5jtuqry8/。所以我不太确定你到底想做什么。

Answer 3

我认为如果您不尝试使用绝对和相对定位，这会更容易。如果你想让图像和表格居中，试试这个：

#fullscreen {
        height: 100vh;
        width: 100vw;
    border: 1px solid black;
    background-image:url(http://placehold.it/224x400);
    background-repeat: no-repeat;
    background-position: center top;
    }
#formDiv {
    margin: auto;    
    width: 224px;
    padding-left: 12px;
}

label {
    display: inline-block;
    position: relative;
    float: left;
    text-align: left;
    margin-right: 20px;
    width: 190px;
    padding: 5px;
}

input, textarea { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    font: normal 13px/100% Verdana, Tahoma, sans-serif; 
    width: 190px; 
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    } 

input:hover, textarea:hover, 
input:focus, textarea:focus { 
    border-color: #C9C9C9; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
    } 

select { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    height: 36px;
    width: 210px;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    }    



.form label { 
    margin-left: 10px; 
    color: #999999; 
    } 

.submit input { 
    width: 210px; 
    padding: 9px 15px;
    background: #617798; 
    border: 1; 
    font-size: 14px; 
    color: #FFFFFF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    }

input[type=submit] {
  border: 1; /*rewriting standard style, it is necessary to be able to change the size*/
  height: 35px;
  width: 210px;
}


input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
-moz-appearance: textfield;
}

<div class="fullscreen" id="fullscreen">
        <div id="formDiv">
    
            <form method="post" action="SMA_Send2.php">
    
                First Name: <input type="text" maxlength="20" name="Fname" required><br />
                Last Name: <input type="text" maxlength="36" name="Lname" required><br />
                Student ID: <input type="number" maxlength="4" name="Sid" required><br />
                Email: <input type="email" maxlength="36" name="Email" required placeholder="Enter a valid email address"><br />
                Device Type:<br />
                <select name="Dtype">
                <option value="iPad">iPad</option>
                <option value="iPhone">iPhone</option>
                <option value="AndroidTablet">Android Tablet</option>
                <option value="AndroidPhone">Android Phone</option></select><br />
                Mac Address: <input type="text" maxlength="17" name="Mac" pattern="([0-9A-F]{2}[:-]){5}([0-9A-F]{2})" title="Use Format: 1A:B2:3C:D4:5E:6F" required placeholder="Ex: 1A:B2:3C:D4:5E:6F"><br />
                <br />
                    <input type="submit" value="submit" name="submit" />
            </form>
    
        </div>
    </div>

强制 div 在移动设备上占据整个屏幕？ CSS、HTML

Force div to occupy entire screen on mobile devices? CSS, HTML

html

css

mobile

fullscreen

divider