метатеги viewport с React и мобильными устройствами

Question

Я хочу поместить следующий метатег в свой компонент, но он вызывает странное поведение при тестировании на iphone 11 или любом мобильном устройстве. Я использую Browserstack, а также свой Huawei P30, и я использую React Hooks, поэтому html действительно jsx.

<meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0, maximum-scale=1.0"/>

Atm это компонент, который я хочу отобразить, но я могу ' Не найду, где еще его разместить - он должен быть в индексе. js?

Я подумал об использовании Helmet для прикрепления метатега области просмотра, но я бы сделал это на стороне клиента, так ли это необходимо?

В стеке браузера это выглядит нормально, но я не могу отобразить его в верхней части страницы?

Мой компонент css содержит:

@media only screen and (max-width: 400px) {
.reportContainer {
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    transform: scale(0.55);
    margin-top: 0px;
    margin-left: 40px;
    background-color: #F5F8FA;
    width: 800px;
    height: 13000px;

}

}

Родительский элемент этого компонента css:

@media only screen and (max-width: 720px) {
.customerReportContainer {
  /* background-color: lightblue; */
  height: 800px;
  width: 400px;
  display: flex;
  align-items: flex-start;
  margin-left: 0px;
  overflow-x: inherit;
}

}

И индекс. js css:

@media (max-width: 600px) {
.html .body #root {
    position: relative;
    width: auto;
    height: 500px;
    overflow: hidden;
    margin-top: 200px;
}
/* For mobile phones: */
[class*="body"] {
    width: auto;
    height: 500px;
    overflow: hidden;
  }

}