shawn
  • 0
Учитель

Лучший способ загрузки боковой панели Только если максимальная ширина экрана > 900 пикселей?

  • 0

В последнее время я немного поиграл с медиа-запросами, и мне нравится эта концепция. Так легко отображать изображения или изменять поплавки div в зависимости от максимальной ширины экрана пользователя.

Я пытаюсь найти способ отображения пользовательской боковой панели в моем шаблоне. Только если размер экрана пользователя достаточно велик, чтобы это разрешить. т.е. максимальная ширина> 900 пикселей.

До сих пор каждое решение, которое я нашел, просто использует css, чтобы скрыть/показать div через медиа-запрос.

пример:

@media screen and (max-width: 880px) {
#secondary-nav  {
    display: none;
}

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

Я ищу лучший подход к загрузке боковой панели, только если он соответствует моим «правилам». Кроме того, ему необходимо перенастроиться, если зритель изменит размер окна браузера, например, при привязке к стороне в win7.

Я нашел одну концепцию использования javascript для проверки ширины экрана и сохранил ее в файле cookie: http://www.yiibu.com/resources/scripts/default.js

Я предполагаю, что в этот момент будет способ проверить данные «ширины» файла cookie, а затем обслуживать боковую панель или нет.

Единственная проблема заключается в том, что произойдет, если файлы cookie не включены?

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

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

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

Share
  1. На моем веб-сайте я загружаю последние комментарии с помощью AJAX для окон размером более 480 пикселей:

    if ( 480 < jQuery(window).width() )
    {
        jQuery(document).ready(
            function()
            {
                jQuery.get('http://toscho.de/?rc', 
                    function(data)
                    {
                        jQuery(data).insertBefore('#inner');
                    }
                );
            }
        );
        jQuery('#posts').after('<div class=clear> </div>');
    }
    

    Этот код довольно старый и не очень элегантный. Но это может дать вам подсказку для правильного направления …

    • 0
  2. Насколько мне известно, это не способ обойти это, это одна из проблем медиа-запросов и CSS. Я часто вижу целые сайты, использующие только visibility:hidden; или display:none; . Лучше всего просто создать отдельную страницу для мобильных и настольных компьютеров или использовать элементы, которые могут быть очень плавными (не динамичными). Я уверен, что вы можете взломать что-то с помощью JavaScript и файлов cookie, но конечный результат, скорее всего, будет очень проблематичным и с трудом соблюдается.

    Это хорошее чтение: http://www.alistapart.com/articles/responsive-web-design/

    • 0
  3. Я думаю, что наименее хакерский способ сделать это — посмотреть на юзерагент на уровне сервера и использовать полноразмерную или мобильную тему на основе этого. В темах вы можете дополнительно отображать/скрывать элементы на основе фактической ширины окна просмотра и быть немного более экономичным.

    • 0

Оставить ответ

You must login to add an answer.