Изменить весь контент сайта в зависимости от разрешения монитора

Question

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

Answer 1

Вы можете определить разрешение и использовать его, чтобы применить класс к телу вашей страницы, и использовать это, чтобы указать CSS, чтобы показать / скрыть определенные столбцы. Я могу предоставить пример кода, если вы дадите мне знать, с каким фреймворком / без фреймворка вы работаете.

Вот действительно простой пример в простом javascript:

window.onload = function(){
 var resolution = 'res'+screen.width;
 document.getElementsByTagName('body')[0].className= resolution;
}

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

Answer 2

Поскольку вы уже обслуживаете альтернативные таблицы стилей в зависимости от ширины экрана, вы можете просто установить содержимое, которое вам не нужно для данной таблицы стилей, равным display:none.

Answer 3

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