CSS在chrome开发工具中工作，但在实际移动设备上不起作用。
CSS在chrome开发工具中工作，但在实际移动设备上不起作用。
提问于 2018-04-04 23:10:05
从图片中可以看到，CSS并不适用于实际的移动设备。我正在使用媒体查询样式在手机上。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 已经使用了视口元。
对为什么会发生这种事有什么想法吗？
我有问题的现场网页。正在进行中。
编辑：
基本上是这样的。除了这个我没有任何问题。我甚至将整个css复制并粘贴到该html中，它按其应有的方式工作，但无论出于什么原因，它都不能在原来的html上工作。
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>CSS
* {
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;
}
}编辑2：
这是android中的chrome问题。下载火狐在我的手机，它的工作和看起来很好。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-04-05 01:01:11
我在手机上卸载并重新安装了铬。现在一切都很好。一定需要更新。
Stack Overflow用户
发布于 2018-04-05 00:23:08
检查在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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49661783
复制相关文章
相似问题
腾讯云开发者
