Почему в разных мобильных браузерах, сайт отображается по разному?

Question

[kauffun]

Господа кудесники, мучаюсь второй день, решил создать веб-студию, а сам не могу понять почему в некоторых мобильных браузерах эта страничка - kauf.fun/cen отображается, так, как и должна, а в некоторых смещается в полнейшую ж... правую нижнюю сторону. Тестил в гугловском браузере - норм; В яндекс браузере - фу-фу и ещё в паре других.

Вот так НЕ должно отображаться

Вот так должно

А вот код этого блока

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);
  }
}

Comments

[Кирилл Инкогнатович]

Не получилось создать качественный адаптивный дизайн :(

Answer 1

[Кирилл Инкогнатович]

Я поискал за вас :)

Comments

[kauffun]

Я всё же знаю, что такое кроссбраузерность и как её осуществлять, но здесь не тот случай. Есть подозрения на неправильные стили, но перепроверив 100500 раз код я ничего так и не нашёл

Answer 2

[Anton]

kauffun, Что бы ты понял человек тебе посоветовал использовать css prefix что бы для каждого браузера использовать отдельные значения элементов.

Далее лови неверные элементы и пиши для них хаки или префиксы

Так же смотрю у вас там flex и прочие крутые новые фишки css, так вот проверять поддержку оных можно тут:
caniuse.com/#feat=flexbox

Это ты еще на айфонах в их сафарях не смотрел... чую что там тоже что то плясать начнет.