Map size for MapKit JS on mobile

Hello, This code works fine for desktop, but it's very difficult to display user location, map type controls for mobile.

    <style>
      #map {
          width:    100%;
          height:   calc(100vh - 132px);
      }
    </style>

The map's existence depends on the height property only. The controls depend on the width one. Although the algorithm is not clear. I see that the width must be more or equal to display width. It works for portrait, but not for landscape.

    <style>
      #map {
          position: absolute;
          top:      58px;
          left:     0px;
          width:    calc(100vw);
          height:   calc(100vh - 132px);
      }
    </style>

How to get stable appearance of the controls for any cases? I used iPhone SE 1.