Веб-страница реагирует на проверку Chrome, но не работает на реальном телефоне

ProgramBox

Веб-страница реагирует на проверку Chrome, но не работает на реальном телефоне

Post author:admin
Запись опубликована:11 апреля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я столкнулся с проблемой с моей веб-страницей: у меня есть веб-страница, на которую я хочу реагировать на мобильных телефонах.

Я пытался

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

и все атрибуты CSS, такие как width:100% и max-width и так далее
, И проблема в том, что когда я использую проверку Chrome для имитации веб-страницы на телефоне, она отображается правильно, но когда я получаю доступ через реальный мобильный телефон, происходит сбой (она отображается как настольная версия, без реакции)

HTML-коды

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Love calculator | Home</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="wrapper">
        <div class="content">
            <h1><img src = "./img/logo1.png" alt = "Calculate your love!" class="img" style = "border: medium none ;" /></h1>
        </div>


        <form method="POST" enctype="multipart/form-data" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
        <div class="form">
            <div class="top-form">
                <div class="inner-form">
                    <div class="label">Your Name</div>
                    <input type="text" placeholder="Your name" required name="firstname">
                </div>
                <div class="inner-form">
                    amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;

                </div>
                <div class="inner-form">
                    <div class="label">Partner's Name</div>
                    <input type="text" placeholder="Partner's Name" required name="lastname">
                </div>
            </div>
            
            <div class="submitbtn">
            <input type="submit" value="" name="submit" style="border: medium none ; background: transparent url(img/calculate.png) repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 131px; height: 52px;">
        </div>
        <div class="bottom-form">
                <div id="instructions"><img src="./img/how-it-works.png" alt="how does it work?" class="img" /></div>
            </div>
        </div>
    </div>

</form>
</body>
</html>

STYLE.CSS

 *{
    margin: 0;
    padding: 0;
    user-select: none;
}
body{
    background-image: url(img/bg-love.jpg);
    background-repeat: no-repeat;
}
.wrapper{
    width: 100%;
    max-width: 680px;
    margin: 10px auto 0;
    padding: 20px;
    box-sizing: border-box;
}
.content{
    text-align: center;
    width: 100%;
}
.submitbtn{
    width: 100%;
}
.content h1{
    letter-spacing: 1px;
}
.form{
    width: 100%;
    margin: 25px 0;

}
.top-form, 
.middle-form,
.bottom-form{
    width: 100%;
    min-height: 65px;
    margin: 30px 0;
    overflow: hidden;
}
.form input[type="text"],
.form textarea{
    padding: 15px 5px;
    box-sizing: border-box;
    width: 100%;
    border: 2px solid #fff;
    border-radius: 2px;
    outline: none;
    transition: all 0.2s ease;

}
.form input:focus,
.form textarea:focus{
    border-color: #4ca1af;
    box-shadow: inset 0 1px 1px rgba(0,0,0, 0.0125),
        0 0 8px rgba(76,161,175,0.5);

}
.form .label{
    margin-bottom: 5px;
    text-transform: capitalize;
    color: white;
    font-weight: bold;
    font-family: sans-serif;

}
.top-form .inner-form{
    width: 29.9%;
    float: left;
    margin-right: 5%;
}
.top-form .inner-form:last-child {
    margin-right: 0;
}

.middle-form{
    clear: both;
}
.bottom-form textarea{
    height: 60px;

}
.btn{
    background: #4ca1af;
    width: 200px;
    padding: 10px 0;
    border-radius: 2px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 5px;
    cursor: pointer;
}
::-moz-input-placeholder{
    text-transform: capitalize;
}
::-ms-input-placeholder{
    text-transform: capitalize;
}
#targetDiv{
    align: center;
    z-index: 4;
    color:   #FFFFFF;
    width:   133;
    font-size: 28px;
    }

@media screen and (max-width: 460px){
    .img {
        width: 100%;
    }
    .wrapper{
        margin: 25px auto 0;
    }
    .top-form .inner-form{
        width: 100%;
        margin: 5px 0;
    }

}

Почему это могло произойти? может ли фоновое изображение повлиять на отзывчивость!?

1. Проверьте свой код.

2. Я тоже загрузил коды! Моя единственная проблема в том, почему она корректно отображается в симуляции и не работает на реальном устройстве!?

3. Может быть, проблема с браузером?

4. Настольный Chrome? Или в мобильных браузерах!?

Ответ №1:

Вы можете добавить тип сжатия в содержимое окна просмотра следующим образом

 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

или просто используйте один из следующих медиа-запросов для смартфона

портрет

 /* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
 /* styles */
}

пейзаж

 /* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
 /* styles */
}

как в портретной, так и в альбомной ориентации

 /* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
 /* styles */
}

И если проблема все еще существует, попробуйте изменить многие возможные html-элементы внутри медиа-запроса так, как это имеет смысл, и также проверьте свой браузер или попробуйте другие смартфоны.

Или вы можете попробовать другой способ, используя JavaScript, если вы знаете некоторые.

в JavaScript есть функция, вызываемая window.matchMedia() , которая помогает вам работать с медиа-запросами в JavaScript, и следующий синтаксис

 if (window.matchMedia('only screen and (max-width: 480px)').matches) {
// style here
}

Ответ №2:

Может ли фоновое изображение повлиять на отзывчивость!?

Да, это возможно. Рассмотрите возможность использования background-size свойства в вашем затронутом div:

 body{
    background-image: url(img/bg-love.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

Однако это только одна из возможных проблем. Попробуйте настроить это и посмотрите, улучшится ли что-нибудь.