Неправильное отображение изображения на сайте на IOS устройствах

Question

У меня возникла такая проблема - на десктопной версии изображение отображается правильно. Ровно то же самое на android устройствах. Но когда заходишь на сайт с ios устройства, то изображение очень сильно приближается и не отображается как оно должно быть.

base_page.html

<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>{% block title %}Shop{% endblock title %}</title>
    <link rel="shortcut icon" type="image/png" href="{% static 'img/favicon.png' %}"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,500;1,100&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/all.min.css' %}" />
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/owl.carousel.css' %}" />
    <link rel="stylesheet" href="{% static 'css/animate.css' %}" />
    <link rel="stylesheet" href="{% static 'css/meanmenu.min.css' %}" />
    <link rel="stylesheet" href="{% static 'css/main.css' %}" />
    <link rel="stylesheet" href="{% static 'css/responsive.css' %}" />
  </head>
  <body>
    {% block container %}
    {% endblock container %}
    <script src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/jquery.countdown.js' %}"></script>
    <script src="{% static 'js/owl.carousel.min.js' %}"></script>
    <script src="{% static 'js/jquery.meanmenu.min.js' %}"></script>
    <script src="{% static 'js/main.js' %}"></script>
  </body>
</html>

page.html

{% extends 'base_page.html' %} 
{% load static %} 

{% block title %} 
Shop
{% endblock title %} 

{% block container %} 
<div class="hero-area hero-bg">
  <div class="container"> 
    <div class="row">
      <div class="col-lg-9 offset-lg-2 text-center">
        <div class="hero-text">
          <div class="hero-text-tablecell">
            <p class="subtitle">Новое поступление</p>
            <h1>Предзаказ на клавиатуры Varmilo!</h1>
            <div class="hero-btns">
              <a href="{% url 'shop' %}" style="font-family:Roboto" class="boxed-btn">Каталог</a>
              <a href="{% url 'contact' %}" style="font-family:Roboto" class="bordered-btn">Контакты</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

main.css

.hero-bg {
  background-image: url(../img/hero-bg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.hero-area {
  height: 100%;
  position: relative;
  z-index: 1;
}

БЛОГ НА HUSL

Неправильное отображение изображения на сайте на IOS устройствах

Ответы (0 шт):