5

Как отобразить широкоэкранный веб-сайт на экране XGA (1024px) в Chrome 26 в Windows XP. Конечно, я могу уменьшить масштаб в Chrome, но, тем не менее, медиа-запрос < 1220px срабатывает, облом! Поэтому я не получаю версию веб-сайта >= 1220px .

Что я могу сделать?

С Firefox это работает: я уменьшаю масштаб, и затем медиа-запрос >= 1220px срабатывает, отлично! Но это не Chrome, на котором я хочу также протестировать веб-сайт.

Исходный код для тестовой веб-страницы:

<!DOCTYPE html>

<html>
  <head>
    <meta charset=utf-8>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" media="screen" href="index.css">
    <style>
      p {
          color: black;
      }

      @media (min-width: 1220px) {
          p {
              color: red;
          }
      }
    </style>
    <script>
      window.addEventListener("resize", function () {
          console.log(window.innerWidth);
      });
    </script>
  </head>

  <body>
    <p>Turns red for window width >= 1220px</p>
  </body>
</html>

3 ответа3

7

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

Однако, по крайней мере, в Chrome 26 изменение метрик устройств не влияет на медиа-запросы (больше?). Итак, на момент написания статьи это не решение.

Скриншот

2

Одним из решений является расширение Chrome (https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal), которое может изменить разрешение окна браузера, чтобы оно было больше, чем разрешение экрана.

1

В Chrome 28 при достаточном уменьшении в конечном итоге запускается медиа-запрос для увеличения экрана. Задача решена.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .