Мой сайт не работает на iphone или Mac

Question

Что происходит, так это то, что у меня есть сайт на android, который правильно загружает меня, на рабочем столе. Но на iphone или ma c os у меня проблемы, и это то, что у него много дефектов, то есть он не улавливает стили.

Я оставляю вас частью html и css, который я использую в дополнение к библиотеке bootstrap 4. Они также могут быть просмотрены на моем хосте, чтобы проверить проблему iphone, потому что на первый взгляд на рабочем столе это выглядит нормально, проблема на устройстве Apple .

https://arstrikestudio.com/dlx/

HTML.

<div class="delexlp">
  <span class="ir-arriba"> <i class="fa fa-arrow-circle-down"></i></span>
  <div id="logo-div" class="paddingleft">
    <div id="logo-img">
  <img id="lgefect" src="delexni/img/default/delex2020-01.svg" width="100%" height="100%">
    </div>

  </div>
  <div class="imgscroll">

  </div>
  <div class="col-lg-12 col-sm-12 oculto">
    <div class="row">
      <div class="col-lg-6 col-sm-12">
        <div class="d-none d-md-block sectlp">
<img src="delexni/img/default/delex.svg" alt="">
  <br>
  <div class="container">
  <p class="text-center">Facilitamos a nuestros clientes el proceso<br>de comprar por internet brindandoles un servicio<br><span style="background-color:orange;color:white;">&nbsp;&nbsp;&nbsp;SIMPLE, CONFIABLE Y RAPIDO&nbsp;&nbsp;&nbsp;</span><br>ganandonos su confianza libra por libra.</p>
  </div>
  <br>
  <div class="text-center">
    <a class="btn btn-secondary" href="register">CREA TU CUENTA</a>
    <a class="btn btn-secondary" href="login">INICIA SESION</a>
  </div>

        </div>
        <div class="sectlpm d-md-none">
          <div class="row spaceblank2" style="padding-left:18%">
          <img src="delexni/img/default/delex.svg" alt="" width="300px" height="200px">
          </div>
          <div class="row" style="padding-top:40vh">
            <div class="container">
            <p class="text-center spaceblank">Facilitamos a nuestros clientes el proceso<br>de comprar por internet brindandoles un servicio<br><span style="background-color:orange;color:white;">&nbsp;&nbsp;&nbsp;SIMPLE, CONFIABLE Y RAPIDO&nbsp;&nbsp;&nbsp;</span><br>ganandonos su confianza libra por libra.</p>
            </div>
          </div>
          <div class="row" style="padding-left:15%">
            <div class="text-center">
              <a class="btn btn-secondary" href="register">CREA TU CUENTA</a>
              <a class="btn btn-secondary" href="login">INICIA SESION</a>
            </div>
          </div>
        </div>

      </div>
      <div class="d-none d-md-block col-lg-6">
        <img src="delexni/img/default/delex-x.svg" alt="">
      </div>
    </div>
  </div>

</div>

CSS.

body{
  background-size: cover;
  background-repeat: no-repeat;
}
.delexlp{
background: url('../img/default/fondo2.svg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.delexlg{
background: url('../img/default/fondo.svg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
}
#logo-div {
    position: fixed;
    height: 14vh !important;
    width: 100vw;
}
#logo-div img{
    width: 100%;
    height: 100%;
    background-size: cover;
}
.black{
  width: 100vw;
  height: 45px;
  background: black;
}
.oculto{
  display: none;
}
.imgscroll{
  height: 6000px;
}
.textground{
  font-size: 720px;
}

.ir-arriba {
    display:block;
  text-align: center;
    padding:20px;
    font-size:48px;
    color:#fff;
    cursor:pointer;
    position: fixed;
    bottom:20px;
    right:50%;
  margin: auto;
  z-index: 6;
}

.btn-delex{
  background-color: #f6871f;
  color: white;

}
.btn-delex2{
  background-color: #f6871f;
  color: white;

}
@keyframes crescendo {
  0%   {transform: scale(1);}
  100% {transform: scale(43);}
}

.paddingleft{
  padding-left: 0 !important;
}
.sectlp {
  padding: 15%;

}
.pdtop15{
  padding-top: 15%;
}

@media (max-width: 700px) {
.form-control{ background-color: red; }
}


h1, h2, h3, h4, h5 ,h6{
  font-weight: 200;
}

a{
  text-decoration: none;
}

p, li, a{
  font-size: 14px;
}

fieldset{
  margin: 0;
  padding: 0;
  border: none;
}

/* GRID */

.twelve { width: 100%; }
.eleven { width: 91.53%; }
.ten { width: 83.06%; }
.nine { width: 74.6%; }
.eight { width: 66.13%; }
.seven { width: 57.66%; }
.six { width: 49.2%; }
.five { width: 40.73%; }
.four { width: 32.26%; }
.three { width: 23.8%; }
.two { width: 15.33%; }
.one { width: 6.866%; }

/* COLUMNS */

.col {
    display: block;
    float:left;
    margin: 0 0 0 1.6%;
}

.col:first-of-type {
  margin-left: 0;
}



.row{
  padding: 20px 0;
}

/* CLEARFIX */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

.wrapper{
  width: 100%;
  margin: 30px 0;
}

/* STEPS */

.steps{
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*background-color: #fff;*/
  text-align: center;
}


.steps li{
  display: inline-block;
  margin: 20px;
  color: #ccc;
  padding-bottom: 5px;
}

.steps li.is-active{
  border-bottom: 1px solid #3498db;
  color: #3498db;
}

/* FORM */

.form-wrapper .section{
  padding: 0px 20px 30px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  opacity: 0;
  -webkit-transform: scale(1, 0);
  -ms-transform: scale(1, 0);
  -o-transform: scale(1, 0);
  transform: scale(1, 0);
  -webkit-transform-origin: top center;
  -moz-transform-origin: top center;
  -ms-transform-origin: top center;
  -o-transform-origin: top center;
  transform-origin: top center;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  text-align: center;
  width: 100%;
}

.form-wrapper .section h3{
  margin-bottom: 30px;
}

.form-wrapper .section.is-active{
  opacity: 1;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}

.form-wrapper .button, .form-wrapper .submit{
  background-color: #3498db;
  display: inline-block;
  padding: 8px 30px;
  color: #fff;
  cursor: pointer;
  font-size: 14px !important;
  font-family: 'Open Sans', sans-serif !important;
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.form-wrapper .submit{
  border: none;
  outline: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-wrapper input[type="text"],
.form-wrapper input[type="password"],.form-wrapper input[type="email"],.form-wrapper input[type="number"]
,.form-wrapper select,.form-wrapper textarea{
  display: block;
  padding: 10px;
  margin: 10px auto;
  background-color: #f1f1f1;
  border: none;
  width: 50%;
  outline: none;
  font-size: 14px !important;
  font-family: 'Open Sans', sans-serif !important;
}

.form-wrapper input[type="radio"]{
  display: none;
}

.form-wrapper input[type="radio"] + label{
  display: block;
  border: 1px solid #ccc;
  width: 100%;
  max-width: 100%;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}

.form-wrapper input[type="radio"] + label:before{
  content: "✔";
  position: absolute;
  right: -10px;
  top: -10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 100%;
  background-color: #3498db;
  color: #fff;
  display: none;
}

.form-wrapper input[type="radio"]:checked + label:before{
  display: block;
}

.form-wrapper input[type="radio"] + label h4{
  margin: 15px;
  color: #ccc;
}

.form-wrapper input[type="radio"]:checked + label{
  border: 1px solid #3498db;
}

.form-wrapper input[type="radio"]:checked + label h4{
  color: #3498db;
}

.spaceblank{
  background-color: white;
  opacity: 0.89;
}
.spaceblank2{
  background-color: white;
}

.pd30{
  padding-top: 30%;
}
.pd60{
  padding-top: 60%;
}
.pd200{
  padding-top: 200%;
}

/* tabletas */
@media (min-width: 768px) {

}

/* escritorio normales */
@media (min-width: 992px) {
 { font-size:px; }
}

/* pantallas grandes */
@media (min-width: 1200px) {

}
/*****/
@media screen and (min-width: 700px) {
    .form-control { font-size: px; }
    .form-wrapper .section{
      position: absolute;
      min-height: 30px;
    }
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) {
  .form-control { font-size: px; }

}

@media only screen and (max-device-width: 480px) {
    .form-control { font-size: 30px; }
    .form-wrapper input[type="text"],
    .form-wrapper input[type="password"],.form-wrapper input[type="email"],.form-wrapper input[type="number"]
    ,.form-wrapper select,.form-wrapper textarea{
      width: 100%;
      outline: none;
      font-size: 32px !important;
    }
    .form-wrapper .button{font-size: 32px !important;}
    .ocultar{
      display: none !important;
    }
    .form-wrapper .section{
      min-height: 30px;
      max-height: 100px
    }
}

Answer 1

Ну, у мобильной версии на всех устройствах были проблемы с масштабированием, и я объясню, как я это исправил.

Во-первых, когда вы transform: scale(); элемент, если ширина / высота скорости масштабирования одинаковые, вы можете указать только 1 параметр вместо 2 (как в исходном коде). Кроме того, на некоторых устройствах делать это с помощью jQuery.scroll() очень медленно.

Но вы действительно были замечены в своем коде, когда создали масштаб в атрибуте style элемента вместо анимации. Если вы делаете анимацию, она получает размытый эффект масштабирования на рабочем столе, включительно. Кроме того, размещение изображений, встроенных в svg, действительно сделало лучшую оптимизацию, чем преобразование изображений в png (правда!).

Если поместить анимацию в стиль, только iOS создает некоторую размытость, которую я не смог удалить .

Таким образом, основная точка ответа - это css rule transform-origin .

Поскольку каждое мобильное устройство имеет свой экран size, просто увеличив масштаб по центру изображения (что является поведением по умолчанию без transform-origin), увеличивает масштаб изображения в неправильном месте.

ТАК, я получил указанную c координату рабочего устройства, которое сработал transform-origin, и применил вычисление для получения соответствующих координат на каждом устройстве (например, рассчитанное с использованием document.documentElement.clientHeight для высоты). И затем установив эти координаты на transform-origin, это сработало.

Также второй важный момент: чтобы анимация работала на мобильных устройствах, я использовал requestAnimationFrame .

Здесь есть важная деталь: вы были абсолютно правы в создании SVG с черным фоном и прозрачными буквами. Я поиграл много, и окончательный ответ использовал это, но я обрезал lo go, как я вас просил, и сделал черные границы , вычисленные в css, используя cal c () , чтобы заполнить весь экран на мобильном телефоне.

И, наконец, я удалил все лишние отступы и применил flexbox к элементам, чтобы получить контроль над центрированием объектов по вертикали /horizontally.

Вы можете увидеть все мои правки на https://github.com/niloct/delex_refactor, и я опубликовал их, используя awesome https://fast.io бесплатный хостинг, интегрированный с github (https://delex.imfast.io/).

Дайте мне знать, если у вас есть дополнительные вопросы. Спасибо за чтение.