Медиа-запросы для точек останова эффективны, только если включено моделирование касания. - PullRequest
Новая
       76

Медиа-запросы для точек останова эффективны, только если включено моделирование касания.

0 голосов
/ 17 июня 2020

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

Есть идеи, почему происходит?

Вот какие запросы я использую: 

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Style */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Style */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
  /* Style */
}

А здесь вы можете увидеть репо на сайте GH: https://bianchinicecilia.github.io/ceciliabianchini/index.html

Заранее благодарим за помощь! :)

1 Ответ

1 голос
/ 17 июня 2020

Думаю, я могу вам помочь.

Вы используете устаревшие медиа-запросы. Вам не нужно использовать -device-, просто min-width или max-width. Я также заметил, что на вашем сайте нет метатега области просмотра: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Это тоже очень важно!

Наконец, просмотрите все метатеги, потому что некоторые размеры конфликтуют.

Список медиа-запросов: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Окно просмотра : https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

...