Мобильные запросы @media не работают после загрузки на heroku

Question

Название описывает это.

У меня есть медиа-запросы CSS, такие как

@media only screen and (max-width: 1080px){...}

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

Answer 1

Попробуйте это @media only screen and (max-width: 800px) {} И попробуйте добавить его в представление не в файл CSS

<style type="text/css">
@media only screen and (max-width: 800px) {}
</style>

Answer 2

Я тоже столкнулся с этой проблемой.Я не знаю, используете ли вы какую-то веб-платформу, как я, но если это так, у вас может возникнуть проблема с тем, как включаются ваши CSS-файлы.

Я использую Django и решил эту проблемуустановив Whitenoise, проект, который помогает обслуживать статические файлы в приложениях Django.У Heroku есть полезная статья .

В основном:

1. pip install whitenoise
2. добавить whitenoise к needs.txt
3. добавить 'whitenoise.middleware.WhiteNoiseMiddleware' в MIDDLEWARE = ​​[...] в settings.py

У меня сейчас все работает нормально.Не должно включать медиа-запросы в представление или помечать любые CSS как важные.

Answer 3

Убедитесь, что в вашем файле index.html есть эта строка:

<meta name="viewport" content="width=device-width, initial-scale=1.0">