удаления секции разметки для мобильной версии сайта

Question

Проблемы

Я использую карусель, построенные с использованием комбинации HTML и JS, в верхней части веб-сайта. Для мобильных посетителей сайта я хотел бы, чтобы эта часть разметки была опущена, чтобы изображения не загружались, скажем, для видовых экранов шириной менее 800 пикселей. Я создал сценарий в нижней части страницы, который получает ширину браузера с помощью jquery, и если ширина достаточно велика, используется .prepend(), чтобы поместить всю разметку для карусели в верхней части моего элемента тела , Очевидно, что это решение является функциональным, но не выглядит красивым, особенно если разметка карусели нуждается в изменении.

Разметка для Carousel

<div class="row"> 
<div class="span12 columns"> 
<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="active item"> 
     <img src="img/1.jpg"> 
     <div class="carousel-caption"><h4>Hello</h4></div> 
    </div> 
    <div class="item"> 
     <img src="img/2.jpg"> 
     <div class="carousel-caption"><h4>World</h4></div> 
    </div> 
    </div><!-- Carousel inner--> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">prev</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">next</a> 
</div> <!--Carousel outer--> 
</div><!--span--> 
</div><!--row--> 

Javascript тогда выглядит ...

if (windowWidth >= 800) { 
    $('.content').prepend('...all the markup for the carousel no spaces or returns...'); 
} 

Вопрос

Это должно быть грубым решением проблемы, в лучшем случае, Кто-нибудь знает о хорошей практике для такого рода вещей? Является ли js/jquery лучшим вариантом? В идеале я просто хотел бы обойти карусель для более низких размеров экрана, но держать все на одной странице, а не создавать отдельную страницу для мобильных телефонов.

Answer 1

Вы можете сделать медиа-запрос, и если ширина браузера ниже определенного размера, тогда выполните отображение: none на карусели. Или что-то подобное ниже, вам, возможно, придется поработать с ним.

@media only screen and (max-width: 767px) { 
    #myCarousel { display: none; } 
} 

Answer 2

Вы могли бы добавить в HTML для карусели в DOM после загрузки страницы (вместо скрытия/удалить его), проверив свойство ширины экрана и выполнение кода соответственно.

Вы можете ввести его в виде строки из JavaScript или сохранить его еще более легким для мобильных пользователей, выборочно загружая его через AJAX.

Answer 3

Посмотрите на these script; они обнаруживают мобильные браузеры без необходимости проверки размера экрана. Вы можете перенаправить на другую версию без карусели на основе результатов или вы можете также использовать плагин JS под названием modernizr для тестирования сенсорных событий и загрузить карусель, только если они существуют, как это:

if (Modernizr.touch){ 
    // Load Carousel 
} else { 
    // Hide Carousel or Load Alternative Content 
} 

Я надеюсь, что это помогает.

Answer 4

Лучше всего вставить разметку, если страница больше 800 пикселей.

Так, например:

экран @media и (мин-ширина: 800px;)

# myCarousel {дисплей: блок; и все другие nessecary стили}

}

Затем вы можете добавить разметку, как вы сделали с JQuery, если вы хотите.

Answer 5

Есть ли причина, по которой вы должны сделать это на стороне клиента? Постановка условных выражений на стороне сервера спасет тонну передачи данных. Было бы тривиально делать что-то вроде php или jsp и т. Д.

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

Так что я хотел бы сделать, это сочетание вышеуказанных предложений -

1) Начните с проверки на стороне сервера. Если вы получаете пользовательский агент для iOS/Android/Blackberry/других случайных мобильных платформ, обходите общую разметку карусели.

2) Предполагая, что вы не получили этого пользовательского агента, а затем перейдите по маршруту Modernizr, но не загружайте какие-либо активы для карусели до тех пор, пока не получите $ (документ) .ready - в этот момент вы должны знать, размер экрана и возможности браузера - вот когда вы можете начать загрузку активов и обработку сценария карусели.