CSS не работает на мобильном устройстве

Я тестирую сайт, и он отлично работает на настольном компьютере или ноутбуке, но как только мобильное устройство используется, оно терпит неудачу. Я имею в виду, что страница неузнаваема.CSS не работает на мобильном устройстве

Страница примера запущена на http://danjamespalmer.com/projects/decoathletic/index.html. Все CSS и JS можно просмотреть из источника. Вот пример все тот же:

HTML:

<!doctype html> 

<html lang="en"> 
<head> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <title>Deco Athletic || You Decide</title> 

    <!-- JavaScript --> 
    <script src="jquery/jq.js"></script> 
    <script src="js/deco.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 

    <!-- Stylesheets --> 
    <link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="css/deco_full.css"> 
    <link rel="stylesheet" media="screen and (min-device-width: 650px) and (max-width: 999px)" href="css/deco_650.css"> 
    <link rel="stylesheet" media="screen and (max-width: 649px)" type="text/css" href="css/deco_649.css"> 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> 


</head> 
<body> 

<div id="main>"> 
    <div id="header"> 
     <div id="header_data"> 
      <div id="logo"><a href="index.html"><img src="images/logo.png" alt="deco athletic logo" class="logo_image"></a></div> 
      <div id="mobile_menu_icon"></div> 
      <div id="navbar"> 
       <ul> 
        <li><a href="">HOME</a></li> 
        <li><a href="">SHOP</a></li> 
        <li><a href="">BLOG</a></li> 
        <li><a href="">ABOUT</a></li> 
        <li><a href="">CONTACT</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div id="first_section"> 

    </div> 

    <div id="second_section"> 
    test 
    </div> 

</div> 
</body> 

</html>

Главная страница CSS:

html, body { 
    margin:0px; 
    height:100%; 
} 

#main { 
    width: 100%; 
    margin: 0 0 0 0; 
    padding: 0; 
    height: 100%; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

#header { 
    height:90px; 
    width:100%; 
    background-color:#C03133; 
    margin: 0px auto; 
} 

#header_data { 
    height:90px; 
    width:1000px; 
    background-color:#C03133; 
    margin: 0px auto; 
    position:relative; 
} 

#logo { 
    position: absolute; 
    top: 50%; left: 0%; 
    transform: translate(-0%,-50%); /* left,top */ 
} 

#navbar { 
    position: absolute; 
    top: 90%; left: 100%; 
    width:420px; 
    transform: translate(-100%,-100%); /* left,top */ 
} 


/* Navigation Bar <ul> */ 
#navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

/* Navigation Bar <li> */ 
#navbar li { 
    display: inline; 
    margin: 10px; 
} 

/* Navigation Bar <a> */ 
#navbar li a { 
    font-size:18px; 
    color:#FFFFFF; 
} 

#first_section { 
    background-image:url(../images/bg_low.jpg); 
    background-size:cover; 

} 

#second_section { 
    margin: 0px auto; 
    position:relative; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 

}

При тестировании на ноутбуке с помощью любого браузера можно изменить размер страницы и отзывчивый, как и ожидалось. Однако при загрузке на мобильное устройство он просто не загружается.

Все ли файлы CSS загружаются на мобильное устройство?

Как вы можете видеть, у меня есть 3 файла CSS, которые относятся к разным ширинам экрана. Если мобильное устройство ТОЛЬКО загружает css/deco_649.css, тогда я мог бы понять, почему он не выглядит правильно.

источник

2016-03-22 Dan James Palmer

В ваших первых двух таблицах стилей требуется минимальная ширина устройства 650px и 1000px, которые будут использоваться браузером. По внешнему виду на мобильном устройстве загружается только css/deco_649.css. – Carlton

@ Карлтон Я предположил, что это может быть так. Я спрашивал, потому что, когда я запускаю браузер на ноутбуке с размером экрана менее 649 пикселей, он все равно загружает все три таблицы стилей –

Да, вы правы - загружен только последний стишет, и он не содержит многого - особенно отсутствует фоновое изображение для '# first_section', которое занимает большую часть пространства в настольной версии. только навигационное меню (скрыто под кнопкой) – Johannes

У вас есть этот селектор CSS в файле "deco_full.css".

#first_section { 
    background-image: url(../images/bg_low.jpg); 
    background-size: cover; 
}

Этот фрагмент определил ваш фоновый рисунок. Но вы устанавливаете этот файл для использования только тогда, когда минимальная ширина экрана устройства составляет 1000 пикселей. Посмотрите на следующей ссылке:

<link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="css/deco_full.css">

Но вы не имеете такое же определение для фона в двух других CSS файлов, введенных для вас мобильных и планшетных устройств. Добавьте тот же CSS (с, вероятно, разными изображениями) к этим двум файлам CSS, и вы хороши.

источник

2016-03-22 23:30:17 Saeid

CSS не работает на мобильном устройстве

ответ

Смежные вопросы