Html 不同于桌面浏览器分辨率的移动显示

我正在设计一个既可用于桌面又可用于移动设备的网站。桌面如下所示（当窗口缩小到移动宽度时）：

但当我在实际手机上查看时：

为什么会有差异？即使使用Google Chrome的开发工具，当我在不同的手机模式下查看它时，它也会以框内文本的形式呈现。我在flexbox中使用标准的CSS媒体查询，这让我很困扰，为什么它会显示不同的结果，即使它经过了优化

<div className="products-overview-container">
    <h2>Product Categories</h2>
    <div className="products-overview-row-container">
        <div className="product-card">
            //Stuff goes here
        </div>
    </div>
</div>

.products-overview-container {
    margin: 80px 0px 30px 0px;
    text-align: center;
}

.products-overview-row-container {
    margin-top: 70px;
    margin: 0px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-card {
    margin: 50px 30px 30px 30px;
    width: 90%;
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 700px) {
    .product-card {
        width: 95%,;
        flex-direction: column;
    }
}

产品类别
//这里有东西
.产品概述容器{
利润率：80px 0px 30px 0px；
文本对齐：居中；
}
.产品概述行容器{
利润上限：70像素；
保证金：0px 20px 0px 20px；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.产品卡{
保证金：50px 30px 30px 30px；
宽度：90%；
显示器：flex；
弯曲方向：行；
}
@媒体屏幕和屏幕（最大宽度：700px）{
.产品卡{
宽度：95%，；
弯曲方向：立柱；
}
}

请共享您的代码…已添加代码。这只是简单的媒体查询。你可以试试

display:-webkit-flex用于chrome&safari？&媒体查询中存在语法错误。。它应该是
@媒体屏幕和（最大宽度：700px）{}
像这样对不起，这是我的错别字。我应该在哪里尝试添加
显示：-webkit flex
？在媒体查询中？检查以下内容：