Блог

Мобильный сайт, над которым я работаю https://lowlifeclothing.co / все ли изображения .gif идеально размещены на моем iPhone 11 Pro Max, где я проходил бета-тестирование, но на меньших разрешениях экрана изображения сильно смещаются и портят дизайн сайта.

Вы можете увидеть, что я имею в виду, изменив тип телефона / размер разрешения сайта здесь; https://bluetree.ai/screenfly/?u=https://lowlifeclothing.coamp;a=20amp;b=10

Сайт напоминает старую школьную игру deer hunter, и код, который я использую для анимации оленей, выглядит следующим образом;

 jQuery(function($) {
  $("#image1").click(function() {
    $(this).attr("src", "https://lowlifeclothing.co/wp-content/uploads/2020/11/Loop12D.gif");
    var url = $(this).attr("data-click-href");
    setTimeout(function() {
      window.location.href = url;
    }, 1000);
  });
}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://lowlifeclothing.co/wp-content/uploads/2020/11/Loop12.gif" data-click-href="https://lowlifeclothing.co/shop/" id="image1"> 

Как я могу заставить изображения оленей, кнопки и меню оставаться в одном и том же месте на каждом мобильном устройстве?

Я использовал поля и отступы, чтобы расположить их так, чтобы они идеально подходили для бета-тестирования на iPhone 11 Pro Max, но они сильно меняются при разных разрешениях экрана, скажем, на iPhone 6.

Вам не нужно использовать JS для быстрого изменения размера изображений. Просто используйте CSS perspective width / height percentage для правильного размера. Обычно при разработке мобильных веб-сайтов изображения, которые вы хотите закрепить по всей ширине устройства, будут центрироваться по width: 90vw; центру .

Возможно, это поможет вам: https://www.impressivewebs.com/width-100-percent-css /

используйте это :

ширина: 100% и высота: 100%

 img {
 width: 100%;
 height: 100%;
}