图片在某些移动设备中无法正确放置，但在其他移动设备中却可以正确放置

Question

我在HTML标头中插入的图片（徽标）有一个非常奇怪的问题。在台式机以及某些移动设备中均可正常工作。问题是由于某些我无法弄清楚的原因，它无法正确安装在手机中。图像丢失了比例。

我有一部iPhone，但它也发生在Android中。很奇怪，因为它在本地工作正常，但是一旦我将其放在服务器中，它就会改变其比例，但只在某些设备中，而不是在所有设备中。

.img {
  max-width: 600px
}

@media screen and (max-width: 575px) {
  .img {
    max-width: 230px;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<header class="d-flex justify-content-center mt-5 mb-25">

  <img src="https://via.placeholder.com/600" alt="logo" class="img img-fluid">

</header>