除非在“ View Desktop Site”中启用，否则React CSS不会在移动设备（Chrome）上显示。视口Meta标签已设置

Question

我正在React中绘制一个具有多个响应部分的登录页面。除文章列表外，每个响应部分均在我的移动设备上正确显示（我使用的是Chrome）。当我选择“查看完整站点”时，使用最小宽度768px宽屏的媒体查询，它可以正确显示。完全符合我的桌面Chrome响应式检查器中针对所有方向的所有尺寸设备的预期功能。

这是移动优先应用程序；也就是说，媒体查询适用于较大的屏幕，较小的移动设备将使用根CSS。换句话说，移动设备不使用@media查询。

我一直在寻求帮助，但没有找到类似的情况，因为页面的其余部分加载得很好，包括类似的媒体查询。我已经在主index.html文件的标题中设置了自动关闭的视口meta标签：

    <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（链接是从react-router-dom导入的；图像是标准的img标签）

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%;
    }
}

桌面响应检查器

实际移动实施