Question

基本上，我的CSS background-color:不会更改我正在使用的移动屏幕（三星S9 ）上的背景颜色。对我来说，奇怪的是，在用于测试的台式机和更大的移动设备（ Ipad ）上，颜色都已成功更改。

我已经完全从我使用的单个CSS文件中删除了较小的移动屏幕（＃C96567 ）上显示的颜色，但是问题仍然存在。

我在CSS文件中没有任何媒体查询，因为我最初认为这可能是问题所在，并且我尝试使用'media ='only screen and (max-device-width: 480px）'来尝试强制执行CSS将该规则应用于小屏幕。

由于我是新用户，Stack不允许我将我的图像嵌入到帖子中，因此请在下面找到2个台式机和移动设备屏幕截图的链接，以便您了解我在说什么。它们是同一页面“ login.php”。

对这个问题有什么想法或建议吗？就像我说的那样，我以前从未遇到过这个问题，而且我该怎么办！

/* CSS sheet in question */
            <link rel="stylesheet" href="css/style.css" type="text/css"/>




/*CSS code*/

body, html {
    background-color: #3AAFA9;
    height: 100%;
    overflow: auto;
}

.main { 
    margin-left: auto;
    text-align: center;
    margin-top: 100px;
    font-family: 'Roboto', sans-serif;
    position: relative;
    color: #3AAFA9;
}

.btn {
    background-color: #314455;
    border: none;
    font-family: 'Roboto', sans-serif;
    margin-left: auto;
    text-align: center;
    margin-top: 40px;    
    left: 10%;
}

.btn:hover
{  
    background-color:#B19F9E;
}

.quote {
    margin-left: auto;
    text-align: center;
    margin-top: 80px;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    color: #FCF5F5;
    background-color: #3AAFA9;
}

.header-wrapper {

    background-color: #D3CED4;
    padding: 10px 10px;
    position: relative;
    z-index: 10000;
}

.header-wrapper a.logo {
    font-size: 25px;
    font-weight: bold;
}

Desktop 'login.php' page for example (Color successfully changes)

Mobile 'login.php' page for example (Color not changed at all)

/*HTML Code*/ 

    <html>
            <head>
                <title>BackChannel</title>
                <meta charset="windows-1252">
                <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
                integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
                <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
                <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>               
                <link rel="stylesheet" href="css/style.css" type="text/css"/>

            </head>
            <body>
                <div class="container main">
                    <div class="row">
                        <div class="col-md">
                            <form method="POST">
                                <fieldset>
                                    <div class="form-group">
                                        <label for="emailAddress">Student Number</label>
                                        <input type="number" class="form-control" name="studentNumber" id="studentNumber" placeholder="Student Number">

                                    </div>
                                    <div class="form-group">
                                        <label for="password">Password</label>
                                        <input type="password" class="form-control" name="password" id="password" placeholder="Password">
                                    </div>
                                    <div class="form-group form-check">
                                        <input type="checkbox" class="form-check-input" id="rememberMe">
                                        <label class="form-check-label" for="rememberMe">Remember me</label>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </fieldset>
                            </form> 
                        </div>
                    </div>
                </div>

                <div class="card quote">              
                    <div class="card-body">
                        <blockquote class="blockquote mb-0">
                            <p>"The roots of education are bitter, but the fruit is sweet"</p>
                            <footer class="blockquote-footer">Aristotle <cite title="Source Title"></cite></footer>
                        </blockquote>
                    </div>
                </div>
            </body>
        </html>

CSS背景颜色在移动设备上不会更改

0 个答案: