Блог

Я новичок в этом, поэтому я ожидаю, что это что-то простое, что я упустил из виду.

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

 @media screen and (max-width: 767px) {
.container {
    width: 100%;
}
.logo {
    background-position: 50% 30px;
}
.banner {
    height: 500px;
}
.banner h1 {
    margin-top: 0px;    
}
.title {
    background-color: #d44137;
    width: 100%;
    margin: 0;
}
.pricing h2 {
    display: none;
}
.pricing {
    width: 100%;
}
.pricing p {
    width: 95%;
}
.pricing-1 {
    margin-left: 0;
}
.pricing-1 p {
    margin-left: 0;
}   
.content {
    width: 100%;
}
.sidebar {
    width: 100%;
}
.testimonials {
    width: 90%;
    float: left;
    margin: 0;
    padding: 10px 5% 10px 5%;
}
.records {
    width: 90%;
    float: left;
    padding: 10px 0 10px 5%;
}
.info {
    width: 90%;
    float: left;
    text-align: justify;
    padding: 10px 0 10px 5%;
}
.info img {
    display: none;
}
.company {
    width: 90%;
    float: left;
    padding: 10px 5% 20px 5%;
}
.video {
    width: 90%;
    float: left;
    margin-left: 5%;
    padding-bottom: 20px;
}
form {
    width: 90%;
    margin: 0 5% 30px 5%;
}
.map {
    width: 90%;
    margin: 0 5% 30px 5%;
}
.contact h1 {
    margin-left: 5%;
}
.footer {
    height: 70px;
}
.copyright {
    font-size: 9pt;
    text-align: center;
}
.social {
    display: none;
}
}
  

Что я заметил, так это то, что это работает для мобильных устройств, если я указываю max-device-width в медиа-запросе, а не max-width, но это не работает, когда я изменяю размер экрана моего браузера. Я также видел, что ширина устройства теперь устарела, поэтому я действительно не хочу его использовать.

Есть идеи?

Действительно ценю помощь! 🙂

РЕДАКТИРОВАТЬ: я пропустил последнюю закрывающую фигурную скобку, но это не повлияло на то, как это выглядит на мобильных устройствах. Спасибо, что подобрали это!

Убедитесь, что вы добавили это в свой html.

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

вы забыли закрыть фигурные скобки // @media screen и (максимальная ширина: 767 пикселей) {

Просто добавьте закрывающую фигурную скобку для вашего экрана @media и (максимальная ширина: 767 пикселей).

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

Кроме того, устаревание свойства device-with просто означает, что оно будет удалено в будущей основной версии, поэтому, вероятно, безопасно продолжать использовать, пока не появится лучший способ.