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

Question

我正在为桌面和移动设备设计网站。桌面看起来像这样（当窗口大小缩小到移动宽度时）：

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

为什么会出现差异？即使使用谷歌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;
    }
}