React CSS не отображается на мобильных устройствах (Chrome), если не включен параметр «Просмотр рабочего стола». Метатег Viewport установлен

Question

Я рисую целевую страницу в React с несколькими адаптивными разделами. Каждый отзывчивый раздел отображается правильно на моем мобильном устройстве (я использую Chrome), за исключением моего списка статей. Когда я выбираю «Просмотреть весь сайт», он корректно отображается с помощью медиазапроса для экранов шириной 768 пикселей с минимальной шириной. Он работает точно так, как и предполагалось в Отзывчивом инспекторе моего рабочего стола Chrome для устройств всех размеров в любой ориентации.

Это мобильное приложение;то есть медиазапросы применяются к большим экранам, а мобильные устройства меньшего размера будут использовать корневой CSS. Другими словами, мобильные устройства не используют запросы @media.

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

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

Есть какие-либо мысли о том, почему мой экран не разрешается должным образом? Я прилагаю соответствующий код React, CSS и несколько скриншотов для сравнения.

HOME

export class Home extends Component {
    state = {
        loggedIn: true
    };

    render() {
        const { blogPosts } = this.props;

        return (
            <div className="home">
                <div className="center-content">
                    <Image
                        filename="horizontal_logo_1920.png"
                        bucket="ridetheteacups-internal-images"
                        folder="logo"
                        className="logo-image"
                    />
                </div>
                <div className="center-content">
                    <h1>Plan your family's Disneyland vacation with confidence!</h1>
                </div>
                <div className="articles-container">
                    {blogPosts.loading || !blogPosts.list.data.length ? (
                        <LoadingSpinner />
                    ) : (
                        blogPosts.list.data.map(post => (
                            <ListItemGrowing key={post.id} item={post} page="blog" />
                        ))
                    )}
                </div>

                <SocialSquare />

                <div className="center-content">
                    <MickeyOutline />
                </div>

                <FooterLinks />
            </div>
        );
    }
}

LISTITEMGROWING (Ссылка импортируется изact-router-dom; Изображение является стандартнымimg tag)

export const ListItemGrowing = ({ item, className, page }) => (
    <Link to={`/${page}/${item.uri}`} className={`list-item-growing ${className}`}>
        <div className="image-container">
            <Image
                alt={item.title}
                bucket={item.featuredimage ? item.featuredimage.bucket : null}
                filename={item.featuredimage ? item.featuredimage.filename : null}
                className="list-item-image"
            />
        </div>
        <div className="headline-container">
            <h3>{item.title}</h3>
        </div>
        <div className="excerpt-container">
            <p>{item.excerpt}</p>
        </div>
    </Link>
);

HOME.CSS

body {
    background: lightblue;
}

.home {
    padding-top: 20px;
}

.home .articles-container {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-flow: column wrap;
    margin: 50px 0;
}

.home .articles-container .list-item-growing {
    flex: 0 0 100%;
}

.home .center-content {
    display: flex;
    justify-content: center;
    margin: 25px 5%;
}

.home .center-content .logo-image {
    background: #81ADEC;
    border-radius: 10px;
}

.home .center-content h1 {
    text-align: center;
}

@media only screen and (min-width: 420px) {
    .home .center-content {
        margin: 25px 15%;
    }

    .home .center-content .logo-image {
        border-radius: 25px;
    }
}

@media only screen and (min-width: 768px) {
    .home .articles-container {
        flex-flow: row wrap;
    }

    .home .articles-container .list-item-growing {
        flex: 0 0 50%;
    }
}

@media only screen and (min-width: 1280px) {
    .home .articles-container .list-item-growing {
        flex: 0 0 33.3333%;
    }
}

LISTITEMGROWING.CSS

.list-item-growing {
    position: relative;
    height: 260px;
    overflow: hidden;
    background: #fff;
}

.list-item-growing .image-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.list-item-growing .image-container .list-item-image {
    /* max-height: 100%; */
    transition: transform 60s ease;
}

.list-item-growing:hover .image-container .list-item-image {
    transform: scale(2);
}

.list-item-growing .image-container .image-wrapper {
    width: 150%;
}

.list-item-growing .headline-container {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 20px;
    height: 33%;
    background: rgba(255,255,255,0.9);
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.list-item-growing .excerpt-container {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    padding: 20px;
    bottom: calc(33% + 15px);
    background: rgba(105,20,205,0.75);
    color: #fff;
    border-radius: 5px;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.25s;
    overflow: hidden;
    opacity: 0;
    z-index: 3;
}

.list-item-growing:hover .excerpt-container {
    opacity: 1;
}

@media only screen and (min-width: 768px) {
    .list-item-growing .headline-container {
        height: 50%;
    }
}

@media only screen and (min-width: 1280px) {
    .list-item-growing .headline-container {
        height: 33%;
    }
}

DESKTOP ЧУВСТВИТЕЛЬНЫЙ ИНСПЕКТОР

АКТУАЛЬНАЯ МОБИЛЬНАЯ РЕАЛИЗАЦИЯ