twitter bootstrap - отзывчивый веб-дизайн: время загрузки на мобильные устройства?

Question

Я создаю страницу загрузки twitter, которая должна быть в состоянии настроить себя на пользователей мобильных телефонов/планшетов ... Я использую «скрытый телефон» и другие классы: http://twitter.github.com/bootstrap/scaffolding.html#responsive
Он отлично работает и показывает совершенно разные стиль на мобильных телефонах, например.

Единственное, что меня беспокоит, это время загрузки на мобильные устройства. Если у меня есть код с классом «скрытый телефон», он должен быть проверен, чтобы знать, что он не должен отображаться. Итак, было бы лучше иметь отдельные файлы .html/.php для мобильных пользователей? Или есть лучший способ не загружать каждый jquery, css и другой материал javascript и html-код на мобильный?

Надеюсь, что вопрос достаточно ясен, если нет, сообщите мне, и я попытаюсь объяснить лучше.

Answer 1

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

Bootstrap имеет встроенные медиа-запросы, поэтому вы можете использовать их для расширения или ограничения использования CSS, основанного на ширине экрана. Вместо того, в том числе все классы и стили для каждого устройства, вы могли разделить их и сделать что-то вроде:

<link rel="stylesheet" media="screen and (min-width: 1024px)" href="default.css"/> 
<link rel="stylesheet" media="screen and (max-width: 1023px)" href="tablet.css"/> 
<link rel="stylesheet" media="screen and (max-width: 570px)" href="phone.css"/> 

делает то же самое с JavaScript слишком легко. Вы можете включить включение стиля запросов к сообщениям в формате JS. Одним из примеров является использование сценария-загрузчика yepnope.js и Modernizr.

Вы можете использовать mq() media query testing в yepnope, которая позволяет выполнять или включать функции JS/скрипты, от тестирования для запросов СМИ:

yepnope({ 
    Modernizr.mq('only screen and (max-width: 485px)') // Media query test 
    yep : 'phone.js', 
    nope : ['default.js', 'tablet.js'] 
}); 

Если вы разрабатываете свой рамочный/кодовые хорошо было бы уменьшить след для мобильных телефонов и всех других устройств.

Answer 2

Если большие изображения являются проблемой, я пытаюсь загрузить их как фоновое изображение с помощью CSS. Это позволяет задавать различные (фоновые) изображения для различных точек зрения с помощью запросов @media, например

@media (min-width:980px){ 

.image-background{ 
width:800px; 
height:400px; 
background:url("large-image.jpg") top left no-repeat; 
} 
} 

@media (max-width:600px){ 

.image-background{ 
width:400px; 
height:200px; 
background:url("phone-image.jpg") top left no-repeat; 
} 
} 

etc 

Вы можете уточнить это больше, используя процентное соотношение для ширины .image-фон DIV и использовать новые возможности CSS, как cover or contain для масштабирования изображения в div.

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

Редактировать
Еще изображения, связанные с вариантом, который является интересным является adaptive-images.com, который изменяет размер изображения на лету, на основе размера экрана зрителя и точки останова вы установили.

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

Удачи вам!