【问题标题】：CSS works in chrome developer tools but not on actual mobile deviceCSS 适用于 chrome 开发者工具，但不适用于实际的移动设备
【发布时间】：2018-09-14 15:38:21
【问题描述】：

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

<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：

这是 chrome for android 的问题。在我的手机上下载了firefox，它可以正常工作并且看起来很好。

【问题讨论】：

请在问题本身中提供minimal reproducible example，而不是链接到页面（可能会腐烂）。
好的，我会这样做的。
你用过引导程序吗？如果不是，您可以在自己的 css 中添加 @media 查询并更改样式、宽度（如果您使用的是小型设备）
未使用引导程序

标签： html css google-chrome mobile media-queries

【解决方案1】：

检查在@media only screen and (max-width: 767px) 下添加display: block; 是否可以解决您的问题。在我的移动浏览器版本上看起来不错。

.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;
}

【讨论】：

尝试无济于事。我把它放在比我的 gs9+ 更小的 iPhone 和 gs6+ 上。这一切看起来都很完美。我猜这与 Galaxy S9+ 的体积很大有关，我认为它不应该因为它具有与 gs6+ 相同的视口尺寸。
哦，是的，有道理。在这种情况下，您需要添加专门为您的设备设计的媒体查询。试图找出浏览器显示内容的分辨率以更新答案。
唯一的事情是它在页面上的其他元素上添加和删除填充，这些元素看起来永远不会像在 GS9+ 上那样。我将不得不解决它。

【解决方案2】：

我在手机上卸载并重新安装了 chrome。现在一切正常。一定需要更新。

【讨论】：

在发布两天后您才能接受自己的答案。
我是新手，对不起！
别担心，我也是。