堆棧內存溢出
  簡體   English   中英

CSS可在chrome開發人員工具中使用，但不能在實際的移動設備上使用

[英]CSS works in chrome developer tools but not on actual mobile device

 原文  2018-04-04 23:10:05  5   2    html/ css/ google-chrome/ mobile/ media-queries

問題描述

開發人員工具中的聯系表

Chrome移動版上的聯系表單

從圖片中可以看到，CSS無法在實際的移動設備上運行。 我正在使用媒體查詢來在移動設備上進行樣式設置。 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

已經使用視口meta。

為什么會這樣呢？

我遇到的實時網頁問題。 工作正在進行中。

編輯：

這幾乎是什么。 除此之外，我沒有任何問題。 我什至將整個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，它可以正常工作並且看起來不錯。

2 個解決方案

解決方案1
 0  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;
}

解決方案2
 0 已采納  2018-04-05 01:01:11

我在手機上卸載並重新安裝了Chrome。 現在一切正常。 必須需要更新。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS Grid 在實際移動設備上無法正常工作的問題。 在 Chrome/Firefox 開發工具中進行測試時，代碼運行良好 Chrome開發者工具中還會顯示其他CSS嗎？ Chrome 開發者工具 - 如何鎖定 css 類列表？ Chrome開發人員工具之外的CSS斷點的死區 Javascript 代碼只能在 Chrome 開發者工具打開時在 Chrome 中工作 按鈕在開發工具上正確對齊，但在實際移動設備上不正確 在 Chrome 開發者工具中編輯 css 后，css 文件無法加載 AngularJs-僅在打開Chrome開發者工具時，$ watch才起作用 chrome開發人員工具中的圖標 CSS @media 查詢僅在開發人員工具的設備模式下有效 - React
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM