Блог

Главная - Вопросы по программированию - Вместо этого мобильный телефон отображает «миниатюру» макета содержимого рабочего стола, чтобы настроить его в соответствии с шириной

Вместо этого мобильный телефон отображает «миниатюру» макета содержимого рабочего стола, чтобы настроить его в соответствии с шириной

#css #mobile #viewport

Вопрос:

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

Когда я нажимаю значок мобильного телефона в консоли Chrome, вместо того, чтобы использовать фактический размер мобильного телефона, который он эмулирует (в данном случае iPhone 10 с шириной 375 пикселей), он показывает крошечное содержимое, как если бы я смотрел на макет рабочего стола на маленьком мобильном экране.

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

введите описание изображения здесь

ОДНАКО если вместо того, чтобы щелкнуть значок мобильного устройства, я просто перетащу окно консоли влево и вручную сожму видовое окно, оно будет работать, как и ожидалось, и правильно распределит содержимое. Видеть:

введите описание изображения здесь

Вот мой HTML и CSS код:

 <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="OEPanel.css">
    </head>

    <body>
        <div id="oepanel" class="OEContainer" >
            <div id="oecell11" class="OECell">
                cell 1
            </div>
            <div id="oecell12" class="OECell">
                cell 2
            </div>
            <div id="oecell13" class="OECell">
                cell 3
            </div>
    </div>
    </body>
</html>

.OEContainer {
    background-color: lightblue;
    border: 3px solid #000000;
    min-height: 10em;
    vertical-align: middle;
    padding: 10px;
    max-width:1130px;
    margin:auto;
    text-align:center;
    justify-content:space-between;
}
  
.OECell {
    background-color: lightblue;
    border: 3px solid #73AD21;
    min-height: 10em;
    vertical-align: middle;
    padding: 0px;
    width:250px;
    text-align:center;
    float: left;
    margin: 5px;
}

Что я здесь упускаю?

Комментарии:

1. Вам нужно добавить мету для реагирования на ваши <head> . видишь это

Ответ №1:

Ян!

Я думаю, что в вашем коде не хватает некоторых вещей, вот пример, в котором используется Flexbox, чтобы сделать то, что вы ищете.

HTML:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div id="oepanel" class="OEContainer" >
        <div id="oecell11" class="OECell">
            cell 1
        </div>
        <div id="oecell12" class="OECell">
            cell 2
        </div>
        <div id="oecell13" class="OECell">
            cell 3
        </div>
</div>
</body>
</html>

В заголовке вашего кода отсутствовали некоторые мета-теги, которые важны для совместимости и правильного реагирования кода.

CSS:

 .OEContainer {
    background-color: lightblue;
    border: 3px solid #000000;
    min-height: 10em;
    vertical-align: middle;
    padding: 10px;
    max-width:1130px;
    margin:auto;
    text-align:center;
    display: flex;
    justify-content:space-between;
}
  
.OECell {
    background-color: lightblue;
    border: 3px solid #73AD21;
    min-height: 10em;
    vertical-align: middle;
    padding: 0px;
    width:250px;
    text-align:center;
    float: left;
    margin: 5px;
}

@media (max-width: 500px) {
    .OEContainer {
        flex-direction: column;
        align-items: center;
    }
}

И в CSS я использовал flexbox, чтобы сделать его отзывчивым с помощью медиа-запроса. Просто добавил a display: flex; в основной .OEContainer и в медиа-запрос для мобильного телефона, который я изменил flex-direction на column .

Я просто начинающий программист, но надеюсь, что это вам поможет.

Комментарии:

1. Большое спасибо @vitor-lacerda! Это сработало идеально, и после того, как я провел здесь пару тестов, я думаю, что на самом деле трюк заключался в теге мета-окна просмотра . Еще раз спасибо, я вроде как новый материал для кодирования, который будет работать на мобильных телефонах, и эти детали очень хитры для меня! 🙂

Метки: ,