Contact form in Developer Tools
Contact form on Chrome for Mobile
从图片中可以看出，CSS无法在实际的移动设备上运行。我正在使用媒体查询在移动设备上设置样式。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
已经使用了视口元。
有关为何发生这种情况的任何想法？
Live Webpage I'm having issues with.正在进行中。
编辑：
这就是它的本质。除此之外我没有问题。我甚至将整个css复制并粘贴到该html中，并且它可以正常工作，但无论出于何种原因，它都无法在原始文件上运行。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<link href="queries.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
</head>
<body>
<div class="contact-body-color">
<div class="row">
<div class="contact-body">
<form method="post" action="mailer.php" class="contact-form">
<div class="row">
<div class="">
<label for="fName lName">Name</label>
</div>
</div>
<div class="row">
<div class="first-name">
<input type="text" name="fName" id="fName" placeholder="First name" required>
</div>
<div class="last-name">
<input type="text" name="lName" id="lName" placeholder="Last name" required>
</div>
</div>
<div class="row">
<div>
<label for="email">Email</label>
</div>
<div class="">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div>
<label for="find-us">Subject</label>
</div>
<div class="subject">
<input type="text" name="subject" id="subject" placeholder="Your subject" required>
</div>
</div>
<div class="row">
<div>
<label for="message">Message</label>
</div>
<div>
<textarea name="message" id="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="buttons">
<input type="submit" value="Send it!">
<input type="reset" value="Reset">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
min-width: 340px;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
/* ----- QUOTE ----- */
.contact-body {
width: 90%;
margin: 50px auto;
background-color: #92b296;
border-radius: 20px;
padding: 40px;
box-shadow: inset 0px 0px 20px #000000;
}
.contact-body-color {
background-color: #575367;
}
.contact-form {
width: 80%;
margin: 0 auto;
}
.contact-form .first-name {
float: left;
width: 50%;
}
.contact-form .last-name {
float: left;
width: 50%;
}
.contact-form .subject {
width: 50%;
}
.contact-form input[type=text] {
width: 90%;
padding: 8px;
}
.contact-form input[type=email] {
width: 45%;
padding: 8px;
}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
margin: 5px 0 15px 0;
border-radius: 6px;
border: none;
box-shadow: 0 4px 2px -2px #666;
}
.contact-form textarea {
height: 200px;
padding: 10px;
width: 100%;
}
.contact-form label {
font-weight: 400;
color: #333;
}
.contact-form input[type=submit],
.contact-form input[type=reset] {
padding: 10px;
border: none;
border-radius: 6px;
background-color: #be6876;
color: #fff;
box-shadow: 0 4px 2px -2px #666;
margin-right: 10px;
}
.contact-form input[type=submit]:active,
.contact-form input[type=reset]:active {
transform: translate(2px, 2px);
box-shadow: 0 2px 2px -2px #666;
}
/* Big tablets to 1200px (widths smaller than the 1140px row) */
@media only screen and (max-width: 1200px) {
.row { padding: 0 10px; }
}
/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {
/* ----- Contact Form ----- */
.contact-body {
width: 100%;
border-radius: 20px;
padding: 40px;
}
.contact-form {
width: 100%;
margin: 0 auto;
}
.contact-form .first-name,
.contact-form .last-name,
.contact-form .subject,
.contact-form input[type=text],
.contact-form input[type=email] {
float: none;
width: 100%;
}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
margin: 5px 0 15px 0;
}
.contact-form textarea {
height: 200px;
padding: 10px;
width: 100%;
}
.contact-form label {
font-weight: 400;
color: #333;
}
.contact-form input[type=submit],
.contact-form input[type=reset] {
padding: 20px;
margin: 0;
width: 48%;
}
.contact-form input[type=submit] {
margin-right: 2%;
}
.contact-form .buttons {
width: 80%;
margin: 0 auto;
}
}
/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
.row {
padding: 0;
}
}
这是针对Android的chrome的问题。在我的手机上下载了Firefox，它运行起来很好看。
答案 0 :(得分：0)
检查在display: block;下添加@media only screen and (max-width: 767px)是否解决了您的问题。我的移动浏览器版本看起来很好。
.contact-form .first-name,
.contact-form .last-name,
.contact-form .subject,
.contact-form input[type=text],
.contact-form input[type=email] {
float: none;
width: 100%;
display: block;
}
答案 1 :(得分：0)
我在手机上卸载并重新安装了chrome。现在一切正常。必须需要更新。