Только некоторые CSS загружаются на мобильных устройствах, отлично работают на рабочем столе.

Веб-сайт работает и выглядит идеально на рабочем столе, даже при масштабировании браузера все работает. Когда я загружаю его на мобильном устройстве, он выглядит совершенно выключенным, загружаются только НЕКОТОРЫЕ css, что делает его еще более странным, иногда он работает, а иногда нет. Я проверил все теги в разделе заголовка, чтобы адаптивный код работал, и все в порядке. Я понятия не имею, что может быть не так. Вот ссылка на сайт http://flits.live/ спасибо!


mobile html css responsive
person Morris Pinedo Michelsen    schedule 07.04.2016    source источник

Ответы (3)


arrow_upward
0
arrow_downward

У вас есть много экземпляров CSS, специфичных для медиа-запросов.

Возьмем, к примеру, ваш класс .phone-screen,

    @media (max-width: 991px) and (min-width: 768px)
    .phone_screen {
        width: 240px;
        -webkit-transform: translateY(80px);
        transform: translateY(80px);
    }

Элемент ширины здесь указывает, что только когда окно находится в диапазоне от 768 до 991 пикселей, тогда к классу phone-screen будет применена ширина 240 пикселей.

Единственный CSS, который технически не загружается и не реализуется на выходе, находится в ложных медиа-запросах. Этот код не будет «загружен», если ширина окна меньше 768 пикселей (стандартная точка останова Bootstrap «xs») или больше 991 пикселя (стандартная точка останова Bootstrap «md»).

(Подробнее о контрольных точках Bootstrap: http://getbootstrap.com/css/#grid-options. ).

Структура сайта плохая, и я настоятельно рекомендую реализовать загрузку, которую можно найти на http://getbootstrap.com/. это действительно поможет вам понять, как все должно быть структурировано для быстрого реагирования. Вы не можете просто размещать div рядом друг с другом и предполагать, что вещи не начнут исчезать в меньших окнах (на самом деле, в вашем случае «за кадром» из-за упомянутых медиа-запросов).

person Danny Mahoney    schedule 07.04.2016

arrow_upward
0
arrow_downward

Для мобильных устройств максимальная ширина составляет 767, а не 768, так что учтите это. Вы написали медиа-запрос для ipad, а не для мобильного телефона. так написано так.

@media (max-width: 767px) and (min-width: 320px)
    .phone_screen {
        width: 240px;
        -webkit-transform: translateY(80px);
        transform: translateY(80px);
    }
person Rajiv    schedule 07.04.2016

arrow_upward
0
arrow_downward

Я бы реализовал бутстрап. Я почистил HTML для вас.

https://jsfiddle.net/w8crtf2p/

После того, как вы очистите код самостоятельно, добавьте следующий код в свой тег head. Вы можете удалить дополнительную тему, если хотите.

Затем просмотрите bootstrap и посмотрите, что вам нужно для вашего веб-сайта.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
person illage4    schedule 07.04.2016