Какой самый эффективный способ скрыть контент для мобильной версии сайта?

Question

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

Как лучше всего это скрыть?т.е. что вызовет наименьшее количество работы для браузера, поэтому он остается отзывчивым?

• Отображение CSS: отсутствует

• jQuery's Метод .remove () , например (не тестировался):

  var elements_to_remove = [
    '#sidebar',
    '#footer',
    '#etc'
  ];
  
  $.each(elements_to_remove, function() {      
    if ($(this).length > 0) {
      $(this).remove();
    }
  });
  

Преимущество .remove (), которое я вижу, состоит в том, что элементы фактически удаляются изДерево DOM, сокращающее использование памяти.

Для маршрута jQuery есть ли лучшее событие для подключения к до document.ready?(т. е. во время создания дерева DOM).

Кроме того, есть ли какие-либо рекомендации относительно того, как это сделать?, он должен работать с существующим контентом / быть 'отзывчивым' .

Answer 1

Самый эффективный способ - не включать контент на страницу в первую очередь.

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

Answer 2

HTML и CSS предоставляют способы сделать это без JavaScript .

Согласно приведенной выше ссылке, вы можете указать разные таблицы стилей для разных устройств, используя:

<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld"/>

Или, если вы хотите использовать одну таблицу стилей:

@media screen { /* rules for computer screens */ } 
@media handheld { /* rules for handheld devices */ }

или @import:

@import "screen.css" screen; @import "handheld.css" handheld;

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

Примечание: Если вы придерживаетесь шаблона проектирования MVC , тогда будет относительно легко создать отдельное приложение и отображать разные представления для пользователя в зависимости от того, получают ли они доступ к сайту через http://myapp.com или http://mobile.myapp.com. , Это означает, что ваши контроллеры и модели остаются прежними, и вам просто нужно создать отдельные представления для частей приложения, к которым будут иметь доступ мобильные пользователи. Тот же метод будет использоваться для создания RSS-каналов или реализации REST API.

Edit: Проблема новых несовместимых мобильных браузеров немного сложнее. С одной стороны, причина, по которой они отображают обе таблицы, заключается в том, что они чувствовали, что разработчики веб-сайтов слишком много болтали / урезали свои сайты для мобильных пользователей (по уважительной причине, так как многие старые, менее продвинутые мобильные браузеры все еще используются) и мобильных устройств. браузеры догоняют настольные браузеры по возможностям рендеринга. Но OTOH, разница в разрешении и размер экрана все еще проблема.

Итак, я бы использовал 2 комплекта электронных таблиц, но дизайн для 3 комплектов пользователей:

• пользователи рабочего стола: загружает screen.css только
• новых мобильных пользователей: загрузки screen.css и handheld.css
• старые мобильные пользователи: загружает handheld.css только

Каскадная природа CSS означает, что при тщательном тестировании вы сможете удовлетворить все 3 демографические характеристики. Может быть несколько приемов обнаружения браузера , которые вы могли бы применить, но это не кажется необходимым.

Answer 3

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

Answer 4

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

Иногда лучше быть прагматичным, чем следовать букве ряда правил, таких как СУХОЙ.

Answer 5

Очень быстрый способ добавить или удалить HTML - это использовать innerHTML, например:

node.innerHTML = '';
node.parentNode.removeChild(node);

И вы можете поместить эти команды в тег SCRIPT в конце тега BODY.