Why is the site displayed differently in different mobile browsers?

Question

Mobile development

Gentlemen magicians, I’m suffering for the second day, I decided to create a web studio, but I myself can’t understand why in some mobile browsers this page - kauf.fun/cen is displayed as it should, and in some it is shifted to the full right bottom side. Tested in a Google browser - norms; In the Yandex browser - fu-fu and a couple of others.

This is how it should NOT be shown

This is how it should

And here is the code for this block

HTML

<div class="fullwin">
<div class="device">
  <div class="display">
    <div class="glass">
      <div class="viewport"></div> 
    </div>
  </div>
</div>
</div>
<p class="instructions">И мы создаём качественные сайты, с супер-адаптивным дизайном!</br>(измени размер окна браузера и удивись)</p>
<p class="vverhh">привет, мы команда kauf</p>

CSS

.fullwin {
  height: 100vh;
  background-color: #4a24a2;
  background-image: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.225), rgba(0, 0, 0, 0) 400px);
}

.device {
  text-align: center;
  position: absolute;
  top: 45%;
  left: 50%;
  transition: all 550ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: translate(-50%, -50%) rotate(-90deg);
}
@media (min-width: 480px) {
  .device {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}
@media (min-width: 1024px) {
  .device {
    padding: 0 40px 5px;
  }
}
.device::before, .device::after {
  content: '';
  position: absolute;
  transition: all 550ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.device::before {
  top: 10px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.25);
  transform: scale(0) translateX(-50%);
  z-index: 1;
}
@media (min-width: 1024px) {
  .device::before {
    transform: scale(1) translateX(-50%);
  }
}
.device::after {
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 0;
  z-index: 1;
  border-radius: 4px 4px 20px 20px;
  background-color: #757575;
  background-repeat: no-repeat;
  background-size: 100px 6px, auto auto;
  background-position: top center, top center;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.05) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 10%, transparent 15%, rgba(0, 0, 0, 0.1) 68%, rgba(0, 0, 0, 0.275) 73%);
  box-shadow: 0px 3px 5px 3px transparent;
}
@media (min-width: 1024px) {
  .device::after {
    height: 17px;
    left: 0;
    right: 0;
    opacity: 1;
    box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.3);
  }
}

.display {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  width: 255px;
  height: 128px;
  border: 2px solid #383838;
  border-radius: 18px;
  box-shadow: -3px 0px 5px 3px rgba(0, 0, 0, 0.2);
  transition: all 550ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (min-width: 480px) {
  .display {
    box-shadow: 0px 3px 5px 3px rgba(0, 0, 0, 0.2);
  }
}
@media (min-width: 768px) {
  .display {
    width: 440px;
    height: 340px;
  }
}
@media (min-width: 1024px) {
  .display {
    width: 520px;
    height: 370px;
  }
}

.glass {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  background-color: #000;
  padding: 7px 20px 7px 25px;
  transition: padding 550ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (min-width: 768px) {
  .glass {
    padding: 15px 25px 15px 30px;
  }
}
@media (min-width: 1024px) {
  .glass {
    padding: 20px 10px;
  }
}
.glass::before, .glass::after {
  content: '';
  position: absolute;
  z-index: 1;
}
.glass::before {
  top: -125%;
  right: 0;
  bottom: -125%;
  left: -30%;
  transform-origin: 100% 50%;
  background-image: linear-gradient(to left, transparent 10%, rgba(255, 255, 255, 0.3) 10%, rgba(255, 255, 255, 0.4) 15%, transparent 15%, transparent 20%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.4) 25%, transparent 25%), linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
  transform: translate(0%, 16.66667%) rotate(45deg);
  transition: transform 550ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (min-width: 480px) {
  .glass::before {
    transform: translate(0%, -16.66667%) rotate(-45deg);
  }
}
.glass::after {
  top: 40px;
  bottom: 40px;
  left: 5px;
  right: 7px;
  border-radius: 3px;
  background-image: linear-gradient(to left, #333 0%, #000 3px, transparent 3px), radial-gradient(circle at 8px, rgba(0, 0, 0, 0) 6px, #333333 6px, #333333 8px, rgba(0, 0, 0, 0) 8px);
  transition: all 550ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (min-width: 768px) {
  .glass::after {
    top: 100px;
    bottom: 100px;
    right: 10px;
    left: 7px;
  }
}
@media (min-width: 1024px) {
  .glass::after {
    right: -5px;
    left: -20px;
  }
}

.viewport {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  background-color: #fff;
  overflow: hidden;
}
.viewport::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  transform-origin: top right;
  transform: rotate(90deg) translateX(110px);
  transition: background-size 0ms 275ms, transform 0ms 275ms;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y;
  background-image: linear-gradient(to bottom, transparent, white), radial-gradient(circle at center, #ffff00 10px, rgba(0, 0, 0, 0) 10px), linear-gradient(to bottom left, #a3e2f5 45%, transparent 45%), linear-gradient(to bottom right, #a3e2f5 35%, #64b46b 35%), linear-gradient(to bottom, white, white), linear-gradient(to bottom, #ddd 5px, transparent 5px, transparent 10px, #ddd 10px, #ddd 15px, transparent 15px, transparent 20px, #ddd 20px, #ddd 25px, transparent 25px), linear-gradient(to bottom, transparent 30px, #ddd 30px, #ddd 35px, transparent 35px);
  background-size: 100% 30px, 20px 20px, 90px 90px, 90px 90px, 100px 100px, calc(90px) 50px, calc(50px) 50px;
  background-position: bottom left, right 22px top 23px, right 10px top 10px, right 10px top 10px, right 10px top 10px, right 10px top 10px, right 50px top 10px;
}
@media (min-width: 480px) {
  .viewport::before {
    background-size: 100% 30px, 20px 20px, 90px 90px, 90px 90px, 100px 100px, calc(100% - 20px) 50px, calc(100% - 60px) 50px;
    transform: rotate(0deg) translateX(0px);
  }
}

.instructions {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 100%;
  z-index: 200;
  font-size: 1.4rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  transform: translate(-50%, 150px);
  transition: transform 550ms cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 550ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (min-width: 480px) {
  .instructions {
    transform: translate(-50%, 80px);
  }
}
@media (min-width: 768px) {
  .instructions {
    transform: translate(-50%, 180px);
  }
}
@media (min-width: 1024px) {
  .instructions {
    transform: translate(-50%, 200px);
  }
}
.vverhh {
  font-family: Rubik Mono One;
  position: absolute;
  top: -10%;
  left: 50%;
  width: 100%;
  z-index: 200;
  font-size: 2rem;
  text-align: center;
  color: rgba(23, 232, 190, 0.7);;
  transform: translate(-50%, 100px);
  transition: transform 550ms cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 550ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (min-width: 480px) {
  .vverhh {
    transform: translate(-50%, 140px);
  }
}
@media (min-width: 768px) {
  .vverhh {
    transform: translate(-50%, 110px);
  }
}
@media (min-width: 1024px) {
  .vverhh {
    transform: translate(-50%, 100px);
  }
}

Answer 1

I searched for you :)

Answer 2

kauffun , What would you understand, the person advised you to use css prefix so that for each browser to use separate element values.
Next, catch the wrong elements and write hacks or prefixes for them
. I also look at your flex and other cool new css chips there, so you can check the support for them here:
caniuse.com/#feat=flexbox
You are not on iPhones in their safaris I looked ... I feel that there, too, something will start to dance.