Проблема с медиа запросами в файлах CSS для iPad MINI 2

Question

@media screen and (min-width: 481px) {


    /* -------------------- HEADER -------------------- */
    .HEADER {
        background: lightcoral;
        display: flex;
        flex-flow: row wrap;
        min-height: 200px;
    }


    /* -------------------- CONTENT -------------------- */
    .CONTENT {
        background: white;
        display: flex;
        flex-flow: row wrap;
        min-height: 600px;
    }


    /* -------------------- FOOTER -------------------- */
    .FOOTER {
        background: red;
        display: flex;
        flex-flow: row wrap;
        min-height: 300px;
    }

}

<!DOCTYPE html>
<html lang="en">

<head> <!---------------------------------------- HEAD ---------------------------------------->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ПОРТАЛ ПРОДЖЕКТ | Главная</title>

       <!---------------------------------------- CSS ---------------------------------------->
       <!-------------------- BASIC -------------------->
    <link href="css/normalize.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    

       <!-------------------- LAYOUT -------------------->
       <!---------- DESKTOP-LAYOUT ---------->
    <link href="css/DESKTOP-LAYOUT/DESKTOP-LAYOUT.css" rel="stylesheet">
    
       <!---------- LAPTOP-LAYOUT ---------->
    <link href="css/LAPTOP-LAYOUT/LAPTOP-LAYOUT_iPAD-MINI-2.css" rel="stylesheet">
    <link href="css/LAPTOP-LAYOUT/LAPTOP-LAYOUT_iPAD.css" rel="stylesheet">
    
       <!---------- MOBILE-LAYOUT ---------->
    <link href="css/MOBILE-LAYOUT/MOBILE-LAYOUT.css" rel="stylesheet">
    
       <!-------------------- GOOGLE FONTS -------------------->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
</head>


<body>
<!------------------------------------------------------- PAGE ------------------------------------------------------->
<!---------------------------------------- HEADER ---------------------------------------->
<div class="container">
    <div class="HEADER">
    HEADER
    </div>
</div>










<!---------------------------------------- CONTENT ---------------------------------------->
<div class="container">
    <div class="CONTENT">
    CONTENT
    </div>
</div>










<!---------------------------------------- FOOTER ---------------------------------------->
<div class="container">
    <div class="FOOTER">
    FOOTER
    </div>
</div>


    

    </body>
</html>

У меня проблема. Просматривая сайт на компьютере, медиа запрос в файле CSS отрабатывается корректно в браузере Yandex Browser для эмулированного браузером размера экрана планшетов iPad и iPad MINI-2, а когда я захожу на хост сайта с планшета iPad Mini-2, то браузер планшета просто не показывает то, что было для него прописано в правилах css. То есть с компьютера браузер в эмуляторе корректно отрабатывает, а сам РЕАЛЬНЫЙ планшет просто выдает десктопную верстку, потому что не видит медиазапрос!!! В чем проблема? Я пытаюсь найти ответы в интернете, но пока ничего не нахожу. Помогите пожалуйста Профессиональные разработчики. Надежда только на вас.

БЛОГ НА HUSL

Проблема с медиа запросами в файлах CSS для iPad MINI 2

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