Почему мой веб-сайт в браузере для мобильных устройств Chrome не выглядит так же, как настольная версия Chrome в том же разрешении? - PullRequest
Новая
       11

Почему мой веб-сайт в браузере для мобильных устройств Chrome не выглядит так же, как настольная версия Chrome в том же разрешении?

0 голосов
/ 31 мая 2019

Так что я не смог найти здесь ответ, касающийся моей конкретной проблемы, но я только что закончил свой первый профессиональный сайт с использованием Chrome. Сделано это отзывчивым. Выглядит хорошо для небольших устройств. Но когда я подключил его к сети (, см. Здесь ) и просмотрел его на своем Iphone 6s, используя хром. У него так много ошибок. Вот только несколько примеров.

Кнопка выталкивается из родительского элемента div, а стили ввода изменились https://imgur.com/a/ZFjyK6J

Цвет кнопки изменился и мои подчеркивания сместились. Но опять же на мобилу смотрится хорошо в моем декстопе ?? https://imgur.com/a/IyVPOjq

элементы ввода показаны здесь больше https://imgur.com/a/SiyDCI1

изображение действительно искажено здесь https://imgur.com/a/5SO3IS9

вот мой github https://github.com/spabsa/kaneConcrete

1 Ответ

1 голос

Для цвета кнопки просто добавьте нужный цвет фона в css 

.footer button {
    position: absolute;
    right: 0;
    top: -50px;
    border: none;
    font-family: 'Rajdhani';
    font-size: 1.2rem;
    transition: all ease 0.4s;
    outline: none;
    background-color: gainsboro; //or any other color
}

Для элементов ввода попробуйте 

@media screen and (max-width: 924px)
.row-2 input {
    width: -webkit-fill-available;
    margin-bottom: 5px;
}

"Думайте о режиме устройства как о приближении первого порядка к тому, как ваша страница выглядит и чувствует себя на мобильном устройстве. С помощью режима устройства вы фактически не запускаете свой код на мобильном устройстве. ноутбук или рабочий стол. " Вы можете проверить больше здесь .

"Префикс -webkit в селекторах CSS - это свойства, которые должен обрабатывать только этот движок, очень похожие на свойства -moz."

...