@kauffun

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

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

Вот так НЕ должно отображаться
59fb372d1fdc7594781291.png
Вот так должно
59fb3789ce250083830101.png
А вот код этого блока
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);
  }
}
  • Вопрос задан
  • 642 просмотра
Пригласить эксперта
Ответы на вопрос 2
Matsunaki
@Matsunaki
Любознательный пользователь :)
qant
@qant
kauffun, Что бы ты понял человек тебе посоветовал использовать css prefix что бы для каждого браузера использовать отдельные значения элементов.

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

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

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

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Home Credit Bank Санкт-Петербург
от 85 000 до 100 000 руб.
Infotech Group Москва
от 100 000 до 150 000 руб.
от 40 000 до 60 000 руб.
21 окт. 2018, в 17:05
5000 руб./за проект
21 окт. 2018, в 16:38
50000 руб./за проект