Блог

Главная - Вопросы по программированию - Возможно ли прерывать медиа-запросы?

Возможно ли прерывать медиа-запросы?

#css #media-queries

#css #медиа-запросы

Вопрос:

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

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

Я попробовал следующий код (изменение начального масштаба), и это отлично работает в браузере на рабочем столе, но не работает на физическом мобильном устройстве.

 <div id="desktop-view-btn">
    <a class="btn">Desktop</a>
</div>
<style type="text/css">
    #desktop-view-btn {
      display:none;
    }
    @media screen and (max-width: 576px) {
      #desktop-view-btn {
        display:block;
      }
    }
  </style>
  <script>
  $(document).ready(function() {
      $('#desktop-view-btn')
          .insertBefore('h1')
          .on('click', 'a', function(e) {
              e.preventDefault();
              $("meta[name='viewport']").attr('content',"width=device-width, initial-scale=0");
              $(this).parent().remove();
          });
  });
  </script>

Кто-нибудь может помочь?

Комментарии:

1. width=device-width мета-тег в области просмотра — это основа для того, чтобы сделать вещи отзывчивыми, но здесь вам не нужен отзывчивый … Вы должны установить фиксированную ширину, не так ли?

2. @CBroe К сожалению, установка ширины устройства не имеет никакого эффекта даже в настольном браузере

3. Я протестировал его в режиме мобильной эмуляции Chrome, и настройка width=1200 при эмуляции iPhone показала, что вид рабочего стола там в порядке. Однако для реальных мобильных устройств это может отличаться. И не уверен, что все браузеры / устройства позволят вам динамически управлять этим после загрузки страницы, вы можете попытаться выполнить повторный переход на сервер и перезагрузить страницу с такой шириной, установленной изначально.

4. Спасибо. Вы правы, что это работает в эмуляторе Chrome, но если вы просто измените размер окна браузера, это не сработает. Аналогично, это не работает на реальном мобильном устройстве, даже после обхода. Может быть, это невозможно?

Метки: