Почему не работают медиа-запросы в хостинге?
Здравствуйте. Локально проверяю верстку, медиа-запросы обрабатываются, после того, как выгружаю на хостинг, страница игнорирует медиа-запросы.
meta name="viewport" content="width=device-width, initial-scale=1.0" Прописано.
Возможно я что-то еще не прописал или дело в хостинге? Просто на этот счет у меня сомнения.
Помогите пожалуйста разобраться в чем проблема.
zakhar19.beget.tech - сайт
Дополнительно:
Что именно не работает? Скрин как локально выглядит, как на сервере, информация при какой ширине экрана это было.
Ответы:
Хостинг к html, css и javascript не имеет никакого отношения, всё исполняется у вас в браузере.
Хостинг и локалка в вашем случае, может иметь отношения к путям до файлов. Проверьте, что они на хостинге верны. Откройте консоль браузера, посмотрите, нет ли ошибок.
- Попробую проверить когда будет доступ к пк
- shijimaru, там css вообще не загружается. как у вас вообще что-то работает...
такие выражения и локально не могли работать:
@media screen and (max-width: 1024px) and (min-height: 1300px) and (max-height: 1366px){ @media screen and (min-width: 1857px) and (max-width: 1920px) and (max-height: 1080px){ @media screen and (min-width: 1190px) and (max-width: 1280px) and (max-height: 800px){ @media screen and (min-width: 995px) and (max-width: 1024px) and (max-height: 600px){ @media screen and (min-width: 900px) and (max-width: 912px) and (min-height: 1300px) and (max-height: 1368px){ @media screen and (min-width: 700px) and (max-width: 912px) and (min-height: 1300px) and (max-height: 1368px){ @media screen and (min-width: 700px) and (max-width: 912px) and (max-height: 1180px){ @media screen and (min-width: 700px) and (max-width: 912px) and (max-height: 1024px){ @media screen and (min-width: 590px) and (max-width: 600px) and (min-height: 1000px) and (max-height: 1024px){ @media screen and (min-width: 527px) and (max-width: 540px) and (max-height: 720px){ @media screen and (min-width: 420px) and (max-width: 430px) and (min-height: 930px) and (max-height: 932px){ @media screen and (min-width: 400px) and (max-width: 412px) and (min-height: 900px) and (max-height: 915px){ @media screen and (min-width: 413px) and (max-width: 414px) and (min-height: 890px) and (max-height: 896px){ @media screen and (min-width: 380px) and (max-width: 390px) and (min-height: 840px) and (max-height: 844px){ @media screen and (min-width: 360px) and (max-width: 375px) and (min-height: 800px) and (max-height: 812px){ @media screen and (min-width: 360px) and (max-width: 375px) and (min-height: 720px) and (max-height: 740px){ @media screen and (min-width: 360px) and (max-width: 375px) and (min-height: 660px) and (max-height: 667px){ @media screen and (min-width: 360px) and (max-width: 360px) and (min-height: 620px) and (max-height: 640px){ @media screen and (min-width: 250px) and (max-width: 280px) and (min-height: 600px) and (max-height: 653px){ |
@media screen and (max-width: 1024px) and (min-height: 1300px) and (max-height: 1366px){ @media screen and (min-width: 1857px) and (max-width: 1920px) and (max-height: 1080px){ @media screen and (min-width: 1190px) and (max-width: 1280px) and (max-height: 800px){ @media screen and (min-width: 995px) and (max-width: 1024px) and (max-height: 600px){ @media screen and (min-width: 900px) and (max-width: 912px) and (min-height: 1300px) and (max-height: 1368px){ @media screen and (min-width: 700px) and (max-width: 912px) and (min-height: 1300px) and (max-height: 1368px){ @media screen and (min-width: 700px) and (max-width: 912px) and (max-height: 1180px){ @media screen and (min-width: 700px) and (max-width: 912px) and (max-height: 1024px){ @media screen and (min-width: 590px) and (max-width: 600px) and (min-height: 1000px) and (max-height: 1024px){ @media screen and (min-width: 527px) and (max-width: 540px) and (max-height: 720px){ @media screen and (min-width: 420px) and (max-width: 430px) and (min-height: 930px) and (max-height: 932px){ @media screen and (min-width: 400px) and (max-width: 412px) and (min-height: 900px) and (max-height: 915px){ @media screen and (min-width: 413px) and (max-width: 414px) and (min-height: 890px) and (max-height: 896px){ @media screen and (min-width: 380px) and (max-width: 390px) and (min-height: 840px) and (max-height: 844px){ @media screen and (min-width: 360px) and (max-width: 375px) and (min-height: 800px) and (max-height: 812px){ @media screen and (min-width: 360px) and (max-width: 375px) and (min-height: 720px) and (max-height: 740px){ @media screen and (min-width: 360px) and (max-width: 375px) and (min-height: 660px) and (max-height: 667px){ @media screen and (min-width: 360px) and (max-width: 360px) and (min-height: 620px) and (max-height: 640px){ @media screen and (min-width: 250px) and (max-width: 280px) and (min-height: 600px) and (max-height: 653px){
- Я понимаю что код написан ужасно, но локально он полностью работает
- shijimaru, ещё раз, "страница игнорирует медиа-запросы" потому что они так написаны — у меня получалось попасть в узкий диапазон их действия, но и это крайне нетривиально из-за дополнительных ограничений по высоте
сейчас доступа уже нет и заскриншотить это невозможнов общем при нормальных медиа-выражениях всё будет работать, я сильно сомневаюсь, что это лоскутное одеяло работало хоть где-то, если только в браузере/DevTools-ах локально не использовалось масштабирование, которое поменялось при открытии на хостинге…
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Прежде всего, если медиа-запросы не работают на вашем хостинге, возможно, есть несколько причин, по которым это может происходить. Вам следует уделить внимание следующим аспектам:
1. Проверьте правильность написания медиа-запросов: убедитесь, что вы правильно указали условия для изменения стилей в зависимости от различных параметров экрана, таких как ширина и высота.
2. Убедитесь, что ваш файл стилей подключен к вашей веб-странице: проверьте, что вы правильно указали путь к CSS-файлу в HTML-коде.
3. Проверьте наличие ошибок в CSS-коде: иногда даже одна небольшая ошибка в CSS может привести к тому, что медиа-запросы не будут работать. Убедитесь, что ваш CSS-код без ошибок и соответствует стандартам.
4. Проверьте поддержку браузерами: убедитесь, что браузер, который вы используете, поддерживает медиа-запросы. Некоторые старые версии браузеров могут не поддерживать некоторые функции CSS3, включая медиа-запросы.
5. Проверьте конфигурацию сервера: иногда сервер может блокировать запросы CSS-файлов или не разрешать использование медиа-запросов из-за некорректной конфигурации. Обратитесь к вашему хостинг-провайдеру, чтобы уточнить этот вопрос.
В целом, следуя этим рекомендациям, вы сможете выявить и исправить возможные причины, по которым медиа-запросы не работают на вашем хостинге. Не стесняйтесь обращаться за помощью к специалистам, если у вас возникли сложности.